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Ajax/Web Programming 


从迖本书能学到什么？ 

《Head First Ajax》 是了解如何构建动态、交互式 Web 应用的一个完美学习体 
验。这本书专门针对你的大脑而制作，涵盖 JavaScript、XHTML、 异步和同 
步请求、 DOM 以及扩展和提升你的 Web 应用开发能力所需的所有内容。你要 
做的不只是记住其他人所写框架中的某些方法，也不再只是从某个工具包向 
应用拖放部件。读完这本书，你将构建一流的应用，能够与服务器通信而无 
需東新加载页面，能够响应用户的动作在屏幕上移动元素，甚至在用户犯错 
误之前就能够预料到用户可能犯的错误。 



为什么迖本书如此乌众不同？ 

我们认为，你的时间如此宝贵，不应过多地浪费在与新概念的斗争中。通过 
使用认知科学和学习理论的最新研究成果，你将享受一种多感官学习体验， 
《Head First Ajax》 采用了一种专门为你的大脑而设计的丰富格式娓娓道 
来，而不是长篇累牍地说教，让你昏昏欲睡。 

.. O’REILLT 

www.oreilly.com 

o Reilly Media, inc •授权中国电乃出版社出版 www.headfirstlabs.com 


“你并不只是在读 Head 
First 书.而是在真正动 
手’做. Head First#, 

这正是差别 所在“ 

瑞士 AW /"，" •大学 

新技术与教育中心 


••对 Apx 无从下手吗？利用 
这本书可以让你摆脱困 
境你将深入掌握核心概 
念. 并在这个过程中享受 
快乐~ 

应用架构师 



此简体中文版仅限于在中华人民共和国境内（但不允许在中国香港.澳门特别行政区和中国台湾地区）销 i 发行 

This Authorized Edition for sale only in the territory of People's Republic of China (excluding Hong Kong, Macao and Taiwan) 


Download at http://www.pin5i.com/ 


















































Head First Ajax 

(中文版) 



0，REILLT 

Beijing • Cambridge • Koln • Sebastopol • Taipei • Tokyo 
O Reilly Media , Inc . 授权中国电力出版社出版 

中国电力出版社 


Download at http://www.pin5i.com/ 





图书在版编目 （ CIP ) 数据 

Head First Ajax ( 中文版 ） /( 美 ) 赖尔等 (Riordan.R.) 苏金国等译 ,- 北京 : 中国电力出版社， 
2009.8 

书名原文 ： Head First Ajax 
ISBN 978-7-5083-8791-8 

I.H... II . ①赖 ... ②苏 ...1H. 计算机网络 - 程序设计 IV.TP393.09 
中 [11 版本图书馆 CIP 数据核字 （ 2009) 第 06592 9 号 
北 M 版权局著作权合同登记 
图 卞： （ )1-2009-1960 号 

©2008 by O'Reilly Media, Inc. 

Simplified Chinese Edition, jointly published by O'Reilly Media, Inc. and China Electric Power Press, 
2009. Authorized translation of the English edition, 2008 O'Reilly Media, Inc., the owner of all rights to 
publish and sell the same. 

All rights reserved including the rights of reproduction in whole or in part in any form. 

英文原版由 O'Reilly Media ， Inc. 出版 2008 。 

简体中文版由中国电力出版社出版， 20()9 。 英文原版的鈿译得到 O'Reilly Media, Inc. 的授权。此简 
体中文版的出版和销售得到出版权和销售权的所有者 —— O'Reilly Media, Inc. 的许可 B 

版权所有，未得书面许可，本书的任何部分和全部不得以任何形式重制。 

卜； 名 / Head Firet Ajax ( 中文版） 

中） 号 / ISBN 978-7-5083-8791-8 

责任编辑 / 刘炽 

封面设计 / Louise Barr, Steve Fehler , 张健 

出版发行 / 中国电力出版社 

地 111：/ 北 M 三里河路 6 号（邮政编码 100044) 

印 刷 / 航远印刷有限公司 

开 本 / 880 奄米 230 奄米 20 开本 26.5 印张 713 千卞 

版 次 / 2010 年 7;| 第 I 版 2010 年 7 月第 1 次印刷 

印 数 / ()001-4(X)0 册 

定 价 / 78 .00 元 （册） 


Download at http://www.pin5i.com/ 




对 《Head First Ajax )) 的高度赞誉 

Ajax 不只是对现有技术的回顾，也不是对 Web 应用稍作修改就能宣称 它支持 Ajax。Rebecca 
M. Riordan 在 《Head First Ajax 》 屮会带笤你一步步完成构建 Ajax 应用的全过程，向你展示 Ajax 并 
不只有‘小小的异步部分’，而是一种完成总体 Web 设计的更佳方法。” 

- Anthony T. Holdener III, “Ajax: The Definitive Guide” 的作者 

‘你并不只是在读 Head First 书，而是在真正动手‘做’ Head First 书。这正是差别所在。” 

- Pauline McNamara, 瑞士 Fribourg 大学新技术与教育中心 

* 作者很好地 i 并授 rAjax 的各个方而。一方面在不断回颐先前所学的知识，另一方 面乂汴 非简申甫 
k 。 另外采用 丫一种 独到的方式介绍各种常见的问题，帮助读者来发现这些问题。在没有权威做 
法的领域，作者为读者展示了所有可能的选择，并鼓励读者作出自己的判断。” 

- Elaine Nelson, 网站设计人员 

'•对 Ajax 无从 F 手吗?这本书可以让你摆脱困境。你将深入掌捤核心概念，并在这个过程屮享受快 
乐。” 

- Bear Bibeault, Web 应用架构师 
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作者 



1 Rebecca 任职于澳大利亚 Microsoft 公司， 
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如何使用这本书 


谁适 含焉迖 本书？ 

如果对下 ifti 的所有问题邯能肯定地回答“ 是”： 

0 你 r 解 HTML 呜？ 愤 得一呰 CSS 和 JavaScript^ (不 

过不要求是一个专家 V? 

(2) 你想真 lE 学会. 理解汴记住 Ajax 吗？你足+是有一 
个11标，想耍开发快速响应的实用 Web 应用？ 

(3) 你是不蛙史喜欢-种轻松的彳，就像在晚 餐餐桌 
上交谈-样， 而不 想意被动地听枯燥乏味的技术报 

告？ 

那么，这本书正是为你而作。 

谁玎能不适含煮迖本书？ 

如果满足下面任 H —种悄况： 

0 你是不是对 HTML 、 CSS 或 JavaScript 完全陌生，一 
无所知（尽苻不要求你有深人的 r 解， m 确实需 
耍有一些实践经验。否则，沾久 :一本 《Head First 
HTML and CSS 》 ，就是现在，读完那本 I ? 之后再来 
读你手上的这本 书）？ 

0 你本分是不足已经堪你一个很榨的 Ajax 或 Web 开发人 
正在找一本参考15? 

@ 你足+是对新鲜事物郎搜首搜 m ?只&欢简申-的样 
式，而不敢尝忒把条纹和格 T * 混在一起肴看？你是 
不足觉得，如果把服务器和 Web 浏览器都拟人化了， 
这样的一本书捋定不是一本 m 儿八经的技术书？ 


那么，这本45将不适合你， 
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引子 


我们知道你在想什么 

‘这算 本 £式的 Web 编程书 W ? ” 


这些阁用来做什么? 


我真地能这样学吗? 







你的大脑总是渴求一些新奇的东西。它 、直在 搜寻，审视，期待着不寻常 
的事情发生。大肭的构造就是如此，正是这一点才让我们不至 T 墨守成 
规，能够与时供进。 i 

我们每天郎会遇到 t 午多按部就班的事情，这些事怡很普通，对于这样 J 
—些例 U 的事惜成荇 f . 常的东内，你的人 W 义足怎么处押的呢？做法& 
很简电，就是不 il : 这些乎常的东西妨碍大脑真正的工 作。 那么什么& M 
大丁.作呢？就足 iiMt 那呰确实屯:要的杯怙。它不会赀心地^ 
U ! 乏味的 东两， 就好像大帖 M 有一个筛了这个筛 f 会筛掉 “ W . 然小屯1 
要"的东两，如果遇到的私怙枯燥乏味， 这叫仏 W 就尼法通过这个筛 f 。 

那么你的人肭怎么知道到底哪些东西歌要呢?打个比方，假如你某 一- 
天外出旅行,突然一 A 大老虎跳到你面前，此时此刻，你的大脑还有 
5H 本会做 H 反应？ 

神经元会“点火”，情绪煤发，释放出一些化学物质。 

好丫，这样你的大 W 就会知道…… ^ 

这肯定很重要!可不能忘记了！ 

不过，假如你正待在家里或者坐在阁书馆里，这里很安全、很舒 
适， ft •定没打老虎。你 iH 在刻々学习，准饬/付考忒。也可能想 
，一叫比较准的技术，你的老板认々爷抛这种技术沿贤•周时㈣， 
最多側过10天。 T3 

这就存在一个问题。你的人恕给你帑忙。它会努力地把这 V-j 
鸣明人歌耍的内穴钍走，保 iif .这呰东沔不忐以占本来就 
个允 足的肭力资源 。 这叫资源 敁奸还 足爪来 id 忭那些确丈歌 
要的巾:怡，比如人老虎.逍遇火灾险估等。 洱比 如，你的大 n 
脑会 it 你记住，绝对不能把“聚会”时狂欢的照片放在你的 J 
Faccbook M 页 _1:。 t 

没杆•种问申的办法來:\•诉人 p : “嘿，大 w , 戊足谢谢你 r , I 


小过不管这木 K 多没怠思，也不管现仵我对它多么尤动 \ ' K , 


似我确实希镨你能把这些东两 Ui I :来。” 


你现在的位置 ► xxi 
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如何使用这本书 




> 鶸 • 产 •• 


I ⑽•为 “Head Pir^i w ^36 ^， 

那么， 怎么学习騖获 ㉟ fkllSH 屋爲溫漂:爲溫 

嚣 S 囍塞绝 I尨鑒5 本 &謅。我们很清楚怎么让你的大脑兴奋 起来。 

下面是一疰 Head First 学习原则。 

，果把文字放奶之相 

羿：^的 mKS 觀 

Hl 休地对你说教，那么你会吏賊哪一个呢 ？ 

鮮懸 

知识。姚，綱，細__思维。 

总料之外的祕。料-项 補度 .的雛減.麟，如果 
ii 过程不乏味，你的大肭很快就能'戶会。 


冗? ㉟ r *. 

iWc ^ 祕 u ： 你感受到 n 十 a 5-个料_求村 

你的_中•不过,我^! 

的，此时躭会有一种自奈感油然而生。 
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引子 


元汄 知： 布兵恩考的恩考 

如果你八:地想学，而辻想， 得电 快、£深，就应谈汴总你怎样才会专注起来， 

考虑 fid 足怎样思考的，并 r 解自己的学习方法。 

我们中间尺多数人 K； 这么大 可能郎 没有 h 过有关元认知成学习玴论的课程。找 
们想学习.但足很少有人教我们怎么来学习。 

+过，这取可以做一个假设，如汜你手上有这本书， 你莨恕 学 Ajax 和 Web 编 
程， 而11 可能+想花太多时间。如裝你想把 这本卜 冲读到的知 m 貞正川起來， 

就耑要 ill 住你读到的所軒内容。力此， 必须押解这4内容。 要想敁大程度地利 
用这本书或其他任何一本朽，或者掌提学>1经验，就要 U ： 你的人脑负 
起责来，要求它 UMt 这些内容。 

怎么做到呢？技巧就 在丁耍 让你的人肭认为你学>1的新东两确实很取 
要，对你的生活有很大影响,就像老虎出现在面前一样。如若不然， 

你将陷人旷 n 持久的拉锯战屮， m 然你 m 想 id 住所学的新内嵙， m 足 
你的大 脑却 会竭尽全力地把它们作:之门外。 

那么究竟怎样才能让你的大脑把 Web 设计看做是一只饥饿的老虎呢？ 

这有两条路，一条比较悭，很乏味：另一条路不仅01快，还更有效。悛"法就是大 
被地重复。你肯定知道,如果反反 M 复地看到同一个东西，即便再没有意思,你也 
能学会并 U1 住。如果做 f 足够的 JE 复，你的大肭就 会说： “尽管行上 i; •这对他来说 
好像不 _ p: 要，个过，既然他这样一而办、丹而三地石•同-个东两，所以我觉得这应 
该是重要的 。” 

更快的〗 j 法达尽一切可能让大脑活动起来， 特别足开动人帖来完成不 M 类型的活动。 
如何做到这•点呢？上一页列出的，习原则 iH 是一些主要的可取做法， ifriH . 经证实， 
它们确实有助千让你的大_全力以赴。例如，研究表明，把文字放/+:所描述图片的 
中间(而+是放在这一页的别处,比如作为标题,或者放 在正文中）， 这样会让你 
的大响更多地考虑这些文字与图片之间有什么关系， lh 电多的神经元点火。让更多 
的神经元点火=你的大_!£有可能认为这些内容值得关让， ifii 几很可能需要 i 己下来。 

交谈式风格也很有帮助，当人们意识到自己在与“別人”交谈时,往往会更专心，这 
足闪为他们总想跟 h 谈活的思路，汴能作出适当的发言。 ih_ 人惊奇的足，人脑并不关 
心“交 i 炎”的对像究竟足谁，即使你只是与一本书“交谈”，它也不会在乎！另一方 
面，如采写作 W 格很正统、干巴巴的，你的大脑就会觉得，这就像咆在•群人当中被 
动地听人做报告一样，很没意思,所以不必在意对方说的是什么，共至 吋以打 瞌睡。 

+过，图片和交谈风格还只是开始而已,能做的还有很多…… 



你现在的位置 ► xxiii 


Download at http://www.pin5i.com/ 







如何使用这本书 


我们是这么 傲的： 

我们用了很多面， W 为你的大脑更能接受看得见的东两,而不是纯文字。对你的大脑来 
说，一幅图顶得上1000个字。如采既有文字又有图片,我们会把文字放在图片当中， 
闪力 义字处在所描述的 ra 片中间时，人肭的〗:作效 宇史 高，倘矜把这 呰描 述文卞作力 
标题，或老“湮没”在别处的大段文字中，就达不到这种效果了。 

我们采用了重复手法，会用不冏方式,采用不同类型的媒体，运用多种思维 f •段来介绍 
间一个东西, B 的是让冇 X ：•内容豇容易储存在你的大脑中，而且在大脑中多个区域都 
有容身之地。 

我 if ] 会用你想不到的"式运川槪念和 w 片，凶为你的大_ 薄欢新 鲜玩匕在提供 m 和思 
想时，至少会含旮一呰情绪/々凑， w 为如果 能产牛怙绪反应，你的大 阽就会 投人 1 虹人的 
注意。 而这会 lh 你感觉到这呰东西史有 吋能 要被 iiim , 代吹:这种感觉"〖能 U 足行点幽 
默，让乂奇怪成 名比较 感兴趣 l〖ii Li 。 
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displayPetailsi) 


thumbnails.js 


我们采 m 了 •种针对个人的交谈式风格.闪为3你的人肭认为你保参4 -个 会谈， 而不 
是被动地听-场演示汇报时，它就会史加关注。即使你实阮上在读-本书，也就是说 
在与书“交谈”，而不是真正与人交谈，但这对你的大脑来 说片没 有什么分别。 

住这本书里，我们加入了80多个实践活动，因为与单纯 的阅谈 相比，如果能实际做点什 
么，你的大脑会更乐于学习,更愿惫去记。这些练习都是我们精心设计的，有-定的 
难度，似是确实能做出来，因为这是大多数人所希望的。 


<^harpen your penci 


il 


我 fn 采川 ( 多种学习模式, 闪为 你 "r 能想循序渐进地学>1，•他人 "r 能洽喵先 
村牿体•个仝面的认 m ， 另 外吋能 还打人只足您 ui -个例 f *。 不过，不管你想怎么 
学，耍足同样的内容能以多种办式来表述，这对甸 个 人郎会有好处。 

这呕的 内容不 h 是哏中.涉及左帖，也小只足比右 Hi 彳竹所 动作，而足会 ih 你的左右脑都开 
动起来， 闪为你的大肭参与得越多，你就越有可能卞会并 记住， 而 il 能更长时间地保持 
注意力。如果只有一半大脑在工作,通常息味着另一半有机会休息,这样你就能更有 
效率地学^史^；时间。 





我们会讲故事.留练习， 从多种不同的角度来看同一个问题. 闪为如淞毋求大肭做-呰 


评价和判断，它就能 i m 人地学习。 


我 们会给 出一些练习，还会问•些河趣,这些问题往往没有直截 r 当的答案，通过克服 
这畔挑战，你就能学得史好，因为 it 大脑真正做点什么的话，它就史能学幺汴 iiift 。 

想想吧，如果只是在体育馆着别人流汗,这对 f 保持你 fid 的体形肯定不会有什 
么帑助，正所谓临渊涘兔,不如退而结网。小过 > i 一方面，我们会竭尽所能不 it 你钻 
TH 把劢川错 f 地"，而是能把功夫用在点卜.。也就坫说，你+会力搞定-个 
准愫的例子 ifti 耽搁，也不会伦太多时 M 去#明內•段艰涩难惮 ifiiH . 通篇 Ha •的文卞， 

我们的描述也小会 太过冏 洁而让人无从 F 手。 

我们用 T 拟人手法。 在故事中,在例子中,还有在图屮,你都会看到人的出现，这足因 
为你本身足-个人，不错,这就是原因。如果和人打交道,相对于某件东西而言，你 
的人肭 会史 为关注。 
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玎认用的方法让你的 
大脑就范 


■ e @ 一否务下来 


好了，我们该做的已经做 r , 剩下的就要看你自己的 r 。 以下提 
示 " f 以作为一个起点 ： 听一听你的人脑足怎么说的，开清楚对你 
来说哪些做法可行，哪苎做法不能奏效。要尝 试新鲜 私物。 


Q) 慢一点。你理解得越多，需要记的就越少。 

不要光是 n 右就行 r 。 停下来，好好想一想。 

15屮提出 h 题的时候，你+ 耍直 接去翮答案。 

可以假想真的有人在问你这个问题。你让大 
脑想饵越深人，就越 釘可 能学会汴 U ! 住它。 

@ 做练习，自己记笔记。 

我们留 r 练习,但是如果这些练习的解答也 
由我们一手包办，那和有人替你参加 考试有 
什么分別？不耍 n 是啪在那电看旮练习发呆。 
拿出笔来， 写一写、國一 画。人蚤研 究都证 
实，学习过程中如果能实际动动于-，将会改 
善你的学4。 

@ 阅读 “ 没有傻问题”。 

颐名思义，这些问题不是叶有叶无的旁注， 

它们绝对是核心内容的 一部分 \ T •万+耍跳过 

去+呑 。 

(4) 上床睡觉之前不要再看别的书，至少不要看其他 
有难度的东西。 

学>】中有一部分是在你合 t 书之后完成的（特 
別是，要把学到的知识长久地记住，这往往无 
法在看朽的过程中做到）。你的人脑也志要有 
h 己的时间，这样才能再做一些处押。如果在 
这段处理时 N 内你又往大_里灌输 r 新的知识， 
那么你刚才学的•些东西就会丟掉。 

@ 要喝水，而且要多喝点水。 

能提供 充足的 液体，你的人肭氺能 dm 衣现。 
如果缺水 （ 可能在你感觉到 U 渴之前就已经缺 
水 了）， 学习能力就会下降。 


(6) 讲出来，而且要大声讲出来。 

说 I ?；•可以剌激大脑的另一部分。如果你想看俺 

什么，或者想更牢地记住它，就要大声地说出 
来。史奸的办法足，大声地解释给别人听。这 
样你会学得更快 ， iM a 可能会有以前光看+说 
时不曾有的新发现。 

( 7 ) 听听你的大脑怎么说。 

注崴一下你的大晌是不是负荷太艰 r 。 如果发 
观0己凡•姶? ' f •光掠影地翻看，或者刚看的东两 
就忘记 r ， 这说明你该休息一会了。达到某个 
临界点时，如果还是一味地向大脑里塞东西， 
这对丁加快学习速度根本没有帮助，甚至还可 
能影响止常的学习进程。 

要有点感觉。 

你的大_耑耍知道这足很 t 要的东西。要真 m 
融人到书中的故事里,为书里的照片加上你自 
己的图题。你"]■能觉得一个文沾很蹩脚，不太 

ih 人满意，但这总比根本无动干衷要好。 

( 9 ) 动手编写 Web 应用！ 

要学 > jWeb 編程，没軒別的办法，只能通过编写 
Web 应用。这本书正是要这么做。使) HAjax 足 
一种技巧，要想在这方闹檀长，只能通过实践。 
我们会给你提供大黾实践的 机会： 每一章都留 
有练习，提出问题让你解决。不要跳过这些练 
习，很多知识都是在构建这些应用的过程中学 
到的 。 k •部分之前，一定要确确实实地 
哚保前面的内容。 
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如何使用这本书 


重要说明 

要把 这召做 足一个学习过程，而不耍简争地把它 fi •成足一本参考书。我们在安徘内 
容的时候有怠做 r - •些刪减，只要足对有关内容的学 >] 有妨碍的，我们郎奄不留怙 
地•律删种 1另外，第一次看这本彳$的时候，要从第-页看起，因为书中后曲•的部 
分会假定你 n 经呑过而 a 学会 I * 前面的内容。 

我们假设你已经对 HTML 和 CSS 很熟悉。 


申-是 HTML 和 CSS 就需要整本书来I并解（实阮上.，确文有这样一 本书： 《Head First 
HTML with CSS & XHTML》） 。我们把本书的$:点放在 Ajax 编程卜.，而不是承誕罗 
列你在其他地力•可能已经学过的大1标 iti 和样式内容 0 

我们假设你以前至少见过 JavaScript 代码。 

JavaScript 至少需要整本书来讲解……哦，等一下，这句话前面说过了。说实在的， 
JavaScript 绝作一个简单的脚本语言，本 朽中无 法涵盖 JavaScript 的所有用法。你只足 
会学到所釘与 Ajax 编柷 有关的 JavaScript 用法，汴了解如 W 允分使用 j avaS cript 为你的 
Web 页而增加交互性以及向服务器发送沾求。 

不过，如采你从未编写过哪怕一行 JavaScript 代码，对函数或大括号完全陌生,或者 
以前从朿没有用任 M -种语言编柷的经 W ， 那么你 " f 能沿要找一本好的 JavaScript 

通读一遍。如果你实在想努力 读这本 代，也片无不 "f -小过要有心现 准备： 在基 

础知 L4 部分我们的进度会相当快。 

这本书没有谈到服务器端编程。 

现在要找用 Java、PHP、Ruby, Python. Perl. Ruby on Rails, C# 以及更多其他语言 
编写的服务器端程序足很常阽的。 Ajax 编 ft!: 适用于所有这些语 r Y , 我们在本|5的示 
例中也会尽力 提供儿 个服务器端程序的例户。 

不过，为了保证把重点放在 Ajax 的学习上,我们不会花太多时间来解释所用的服务 
器端程序：这 r {l 只会展不服务器的基本输人和输出，不过这对干我们来说已经足够 
广。我们相信，你编写的 Ajax 应用应该能使用任何类喂的服务器端程序,另外我们还 
相信你应该足够聪明，能把从使用 PHP 的例 f 中学到的知 mi 应川到 Ruby on R a u s 成 
Java servlet 的应用屮。 

口 J " 以 i 力问我们的 M 站 http://www.headfirstlabs.com/books/hfajax , F 我术例服务器端 
程序，这样你就能 A lL 运行这些应用广。 
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建议你对这本书中的示例使用多个浏览器。 

非常糟糕的是，不同的 We b 浏览器会以完全不 N 的方式处理你的 H T M L 、 C S S 和 
JavaScript . 如果想成为一个代正的 Ajax 程序 M ,-定要在多个现代浏览器上测试 
你的异步 应用。 这本书中的所有示例都已经在最新版本的 Firefox 、 Opera , Safari 、 

Internet Explorer 和 Mozilla 测成过。不过，如果你发现有问题，请吿■诉我 111. 这应 

该是个 意外。 

我们通常使用标记名作为元素名。 

我们不会说 “a 元素”成“ ‘ a ’ 元素”，而是使用一个标 IcL 名，如“ < a > 元素”。尽 
管从理论上讲这是不正确的（因为 < a > 是一个开始标 U !， 而不是一个完整的元 桌）， 
但这样可以使文字更可读。 

书里的实践活动不是可有可无的。 

这电的练习和实践话动不是可有可无的装饰和摆设，它们也是这本舶核心内容的- 
部分。其屮有些练习和活动有助干 记忆， 有些能够帮助你理解，还有一些对 T 如何 
应用所学的知 i 只很有帮助。 千万不要把这些练习跳过不做。 

我们有意安排了许多重复内容，这些重复非常重要。 

Head First 系列的 I 1 〕有一个与众不同的地方，这就是我们希望你确确实实地学会，另 
外希错在学完这本书之后你能记住学过了什么。大多数参考书都不太重视重复和问 
颐，但是由 T 这是一本有关学习的书，你会石到一呰概念一而再、再而三地 出现很 
多次。 


示例尽可能简洁。 

读者告诉我们，如果只是为了査找需要押.解的一两行代码而耍通査包含200多行代码 
的示例，这很让人恼火。这本书中的大多数示例都在尽可能小的谅幅内显示，这样 
你就能清楚而简申地肴到你真正想了解的部分。不要期空所有示例都足完整的，它 
们其至并不完备一编写这些示例只是为 r 学习有关知 m ， 通常并不实用。 

所有示例文件都已经放在网上，你可以自行下裁。这呰文件吋以从 htt p : // www . 
headfirstlabs.com/books/hfajax 々 ^IJ 0 

“Brainpower” （头脑风暴）练习没有答案。 

有一些头脑风猱练 >] 没有提供正确答案，在另外一些练>]中，头脑风樣实践活动学 
习过程的一部分就是 U : 你确定你的答案是否正确以及在什么怙况下正确。在某些头 
fBK 暴练习中,会给出一些提示，指明正确的方向。 
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技术 审校: 


Bear Bibeault 是一位 Web 应用架构帅，负责 个 由多 
个财富 500 强公司资深会计师使用的企业财务应用。另 
外他的客户还非常喜欢他业余创建的一些 We b 应用 
(当然也支持 Ajax ) ，他还拘任 JavaRandi . com 的行政长 
R - (萵级仲哉 人）。 

Anthony T. Holdener III^Korein Tillery 存限公 njCl 
息技术部门的 ± 管，不过早期作程序员时他曾是一个 
Web 应川开发人( 4 。另外他 ili 苦打 《 Ajax : The Delini- 
live Guide)) (O’Reilly ) 。 

Elaine Nelson 从事网站设计 已 近 K) 年。正如她对她 
母亲所说，英语学位尤论在哪里都很有用。可以在 
elainene1son.org f 解 Elaineiik 近的心 fW :》 和想法。 
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Pauline McNamara 迮瑞 LFribourg 大学新技术 和教疗 
中心从事电了-教育 ( c - learning ) 的开发和支持工作。 

Andrew Monkhou 会 ejiJavaRanch 的一位管员， f - 常 

还是一个 Java 开发人员,目前他任职于美国的 Person - 
alShopper.com -离他在•澳大利亚的采 l'(. 是很远。 

Fletcher Moore 完成了我们的所有代码示例，绝对是 
这个项丨 I 屮不 " f 成缺的人物。他 ^Georgia Tech 公 Hj 的 
一位 Web 开发人员和设计师。在他的 闲暇 时间,他热衷 
千骑爷牟，足一个小错的音乐京和园艺师，另外还足 
狂热的 Red Sox 迷。他与垂子 Katherine 、 女儿 Sailor 和 
儿 f Satchel 住/+:业特兰大。 
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致谢 

我的支持 闭队: 

即便打那些 4* .越的技术审校，如采没有我 d 己这个小小的技术支持 
[fl 队，这本朽绝对无法问 tk» Stephen Jeffries , 超-流的开发人 
W , 他铋助完成 T 服务器端代码并在全 K 提交之前屮仵了所有示例 
代 fi f i。Michael Morrison 足世界上是最棒的咨询顾问，常常半夜都 
在冋答“为什么这个 代时在 别的地//都能正常丁-作， ifn 在这个浏览 
器中却不能”之类的问题。 

John Hardesty 提供了你将构让的众多游戏的基本兗法。 

(他 也足 我的兄弟，我•直认为这真 是太幛 1\不过不要告诉他我 
这样讲过。） 

致我的 编辑 : 

编辑对作荇最好的礼物莫过于 汽诉他 
们“这样不行,为什么不行,我认为 
你应该怎么做”。毎到紧要关头 Brett 
McLaughlin 就如约 ifii 至，对此我总是深怀感激。 了 

^iett f^cLau^htin 

致 O'Reilly 团队 : 

还耍感谢 Laurie Petrycki , 她在疯彳 f. 的技术出 
版 Ht 界 1 R 总是一言九鼎，感谢 Louise Barr 和 
Sanders Kleinfeld, 他们 能以无 勺伦比的耐心 
和技艺解决最难缠的 InDesign 问题。 


、 Lou 8<m 

Sanders KLeinieLd 
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Safari ©© 书在线 

Ssfdn 如果在你喜欢的技术书封曲 上看 到一个 Safari ® 图标，这说明可以通 

BoGks0nUnB * 过 O’ReiUy Network Safari Bookshelf 在线获得本书英文版。 

Safari 提供了一个比电子图书更好的解决方案。这是一个虚拟图玲馆，可以从中很容易 
地搜索成千上万顶尖的技术书，剪切粘贴你需要的代码示例，下栽章节内咨，如果需要 
最准确、最前沿的信息，也可以在这里快速地找到。请访问 http :// safari . orielly . 
com , 免费体验。 
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让你的大脑来学 Ajax . 你想坐 K 来学点东西，可是你的大触却总在帮倒 
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用 Ajax 方式思考 

欢迎走进 Ajax 应用——这是一个全新的 Web 世界。 

你已经构建 r 你的第一个 Ajaxl . V : lfl ， 可能现在 IH 在考虑怎样修改你的所有 
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JavaScript 擧件 

回应你的用户 

有时需要让你的代码对 Web 应用中发生的事件作出回应……这就引入了事件。 4f 件 

足指仵页面上、浏览器中甚至 Weh 服务器上发生的犮个事倩。不过只知道事件还不 
够……柯时你还希望对事件作出响应。通过创建代码并注册为事件处理程序，就可 
以在每次发生一个特定事件时让浏览器运行 你的亊 件处理程序。通过结合亊件和事 
件处理程序，你就能得到交互式 Web 应用。 


Beginner 
的荽俅 w 埤赵涂掬， 


( Intermediate 
的衮幻铊锖殘护律寮邛 








一 t 刀从瑜咖开始 . 94 

Ajax 应用不只是各组成技术的简中.堆积 101 

Marcy 的 XHTML . 102 

亊件足交互性的关键 104 

将 Web 贝面上的事件连接到 

JavaScript 中的事件处理程_ 107 

使 M〗windt>w.«nload 杯件 初始化 Web 页面的其余交互件（半件）108 
把左边的阁像改为可点 Ji 113 

使用 XHTML 的内容和结构 114 

再为 hideHintO 增加代码 117 

标签! Ji: 一种视觉（阁形化）印象 118 

使用一个 for ……循环处 PI! 所有图像 119 

CSS 类是关琎（再一次） 120 

嗯 …… 但是标签页不足 <a>! 121 

这也会破坏我们的 JavaScript, 是不是？ 122 

使川淸求对象从服务器获取课程 i 羊细信息 127 

两个函数修改 Web 豇面中相同的部分时要当心 128 

需要改变 抑本 屮的图像时，应当考虑“改变 CSS 类” 133 

XHTML 中的链接表示为 <a> 元素 134 

还需要-个闲数忒示活动按钮和隐藏按钮 135 
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多个拳仵处理程序 

两人成伴 

一个 事件处理程序 往往还 不够。 

有时一个事件需要调用多个事件处理程序。也 IT •你要做一些特定事件的动作, 
另外还有一些通用代码，把所有这些内容都寒到一个事件处理函数中足不合适 
的。或许你力图创建 简洁、可重用的代码， iftiil 同-个屯件要触发两个 不同的 
功能。幸运的是，你可以使用一些 DOM Level 2方法为单个 事件指 定多个事件处 


理函数。 


一个事件只能冇一个丰件处理程序与之关联 
(或者肴I:去如此） 140 

事件处理程序只是域性 141 

一 个属性 U 能有一个值 141 

用 addEventLisienerO 指定多个本件处理程序 142 

DOM Level 2 中对象 岈以为 电个亊汁•指定多个事件处理程序 |44 

Internet Explorer 怎么 了？ 148 

Internet Explorer 使… 一个完 全不 M 的私 件校I 1 .! 149 

attachEvent() 和 addEventListencrO 在功能上是等价的 I 49 

addEventHandler() 适用干所有应用， 

而不 H 足 Marcy 的瑜咖页面 154 

I、•而史新 initPagc( >来使 Iti 新的X H. 涵数 155 

使用 alertO 査错 157 

那么还有什么会出叫题呢？ 157 

1E 中唭件处理程卬的所有者是 IE 的事件枢架，而不是 
3前活动的页而对象 159 

attachEvent()^lladdEventListener() 

为亊件处理程序提供了另一个参数 160 

需要为 Event 参数命名，以便事忭处现程序处理 161 

你说的是 target, 我说的是 srcElement. 162 

那么 H 体该怎样得到触发車件的对象呢？ 166 
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异步应用 

这就像重新申请驾照 

你是不是等烦了？是不是很厌恶这种长久的等待？可以利用异步解决这个问 
题！ 

前面已经通过创建过几个页面对服务器发出异步请求來避免用户等待页面刷 
新。这一章屮，我们还会更深入地 讨论 构建异步应用的详细内容。你将 了解异 
步到底是什么意思， 学习如何使用多 个异步请求， 其至还可以建立-个 监视器 
函数, 从而避免这种片步性把你和你的用户搞糊涂。 


异步到底足什么意忍？ 

你一直都在构建异步应用 

不过，有时你甚至很少注意到…… 

既 然谈到 史多的服务器端处理…… 

只需3个简中.步骤，实现（更多）异步性 

志要两个口令 域和一 个放罝封面 ra 片的 < div > 

如果需要新的行为. 

可能黹耍 -个 新的丰件处理阐数 

利用 个 请求对象，可以安全地发送和接收一个异步请求 

异步请求不做任何等待……芮至包栝它们自己！ 

如采建立两个不 N 的请求， 

使用两个不 M 的请求对象 

兄•步息 味着+ 能依赖 f 请求和响碎的顺序 

监视器函数……从局外监视你的应用 

可能需要采取行动时调用监视器函数 

监视器通过状态变 s r 解发生 r 什么 

现在来看最后一招…… ' 

M 步 沾求会 阻寒所冇代码的 x 作 

使用 setlntervalOUjavaScript 运行你的进程， 

而不足山你 「 Id 的代码来运行 


174 

176 

177 

178 
181 
182 


187 

196 


197 


198 

204 

209 

210 
212 
216 
218 


221 



Download at http://www.pin5i.com/ 











目录 



丈档对象模型 

Web 页面森林 

迫切 需要： 易于更新的 Web 页面。现在该你己动手编写一些代码来动态地更新 
Web 页而了。通过使用文档对象模型，你的页面会焕发新的生命，能够响应用户的 
动作，而 II 能永远摆脱不必要的豇面重我。读完这一章之后，你将能许找、柊动和 
更新 Web 贞面中几乎任 M 位置 h 的内容。 



你吋以 改变页向的内容…… 230 

• 或者也可以改 变庹面 的结构 231 

浏览器使用文档对象校型表治你的页面 232 

这是你编写的 XHTML …… 234 

这是你的浏览器所#到的 235 

页面就是一组相互关联的对象 237 

T 面使用 DOM 构建一个动态应用 244 

先从 XHTML 开始…… 246 

appcndChildO 向节点增加一个新的 f- 节点 255 

口 1以按名或 id 定位元素 256 

与一个新父元桌的会谈 259 

能移动所点击的贴块叫？ 260 

可以利用家族关系在 D 0 M 树屮移动 262 

DO M 树包含 We b 豇面上所有内容的相应节点 272 

文本节点的 nodeName 是 “#text” 274 

我崧吗？我“ 了吗？ 278 

不过说正经的……我羸 了吗？ 279 
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管理 POM 


我的愿望就是你的命令 

OOM 

有时你只是需要一点精神控制。 

我 fH 很髙兴地知道 Web 浏览器能把 XHTML 转换为 DOM 树。在这些树中 移动可 以做 
很多事情。不过真正强大的是充分控制 DOM 树，让 DOM 树看上去与你期望的一样。 
有时，你所需要的是增加一个新元素和一些文本，或者要从 IU •面完全删除一个元素， 
iP<img> 0 所有这些工作郎可以利用 DOM 做到，其至还可以做得更多。通过使用 
DOM， 我们还可以完全避免可能导致麻烦的 innerHTML 属性。结果怎样呢？我们得 
到的代叭能赋 f •页而史多活力，而 fL 不会把表示和结果与 JavaScript 沘在一起。 


Webville Puzzles. 授权代 PI! 


284 



Woggle 不用衣单元格放 S 贴块 
XHTML 中的贴块采用 CSS 定位 
“ 我扪不 想要完全随机的字母……” 

丧冶全部都在 CSS 中 

^要•一个新的唞件处理程序处邱贴块点击 
开始逑立毎个贴块点击事件的亊汴处现程序 
可以任 randumizeTiles() 函数中指定一个亊 件处押 程序 
JavaScript 中域性值只是卞符串 
T 右要向 “ curremWord” <山\>增加内容和结构 
使用 DOM 改变豇面的结构 
使用 createElcmentO 创建一个 DOM/0; 素 
必须卉诉浏览器要把新创建的 DOM 节点放在哪电 


志要禁用各个贴块。这说明要改变貼块的 CSS 类 







:福兔 

||鼷_1] 
嶋19 


V.: Av ，彷以 1 1 < 


難2 i 
■il ■鼴 


. 并关闭 addLetterO 亊件处理程序 

提交一个单词只是（另一个）请求 
我 I 的 JavaScript 并不关心服务器如 H 对请求得出响应 
可用性 检査： 什么时候可以调用 submitWordO? 
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框架乌工異包 

谁也不相信 

所有那些 Ajax 框架在内部到底做了什么？ 

如果你参与过 Webville 的项 H ，能免少遇到过一个 JavaScrip 〖或 Ajax 框架。一些框 
架提供了便利方法可以用来处理 DOM ， 54外一些框架使验证和发送请求的工作变 
得很简单。还有一些框架提供 f 一苎函数库，抟中包含预打包的 JavaScript 屏嵇效 
果。不过，该用哪一个框架呢？如何知道这些 框架内 部到底发生 f 什么？现在你应 
该不 H 是使用其他人的代码…… Ifii 应当几 iK 控制你的应用。 



那么冇哪些框架？ 

335 


紅 个枢架使用不同的语法完成1.作 

336 


诘法可能不 M …… ^JavaScript 仍坫•样的 

337 

不读用楛穿的涿 © 

使用框架还足不用抿架？ 

340 


完全由你选择…… 

342 



XML 清求乌响应 

难以言表 

要让你描述未来10年的自己你会怎样做？未来20年呢？有时吋能需要随你的需 

求而变化的数据……或者数据会随客户的需要而变化。你现在使用的数据也许在 
几个小时后、几天后或者几个；!后需要改变。利用 XML ， 即可扩展耘记语言，数 
据能够描述自己。这意味着你的脚本中不苒充斥着 if 、 else 和 switch 语句。相反， 
可以使 H 1 XML 提供的我描述来得出如 MflifflXML 中位含的数据。这样一来不 

f 乂能得到更大的灵活性，还能更容易地完成数据处理。 



Rob 4 ^ 
个 




21 1U； 纪经典摇滾卷土 策来 344 

服务器如何发 M 多值响应？ 347 

innerHTML 只足对 Web;.V: 用的客户端来说简单 353 

使川 DOM&PfiXML， 

就像处押 .XHTML —忭 359 

XML 是自描述的 366 
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JSON 

I JavaS 

M M JavaScrip 

觅出萌 I 


JavaScript 之子 

JavaScript、 对象还有记法，哦，天哪！ 

如果耑要用 JavaScript 灰示对象，你就会爱上 JSON, 也就是 JavaScript 标准对象记法 
(JavaScript Standard Object Notation ) 。利用 JSON, 你能够用文本和一些大括号 
表示复杂的对象和映射，吏棒的是，可以从其他语言（如 PHP、C#、 Python 和 Ruby) 
发送和接收 JSON。 


JSON 玎认 S 文本^象 


JSON nj •以是文本和对象 

JSON 数据可以处理为 JavaScript 对象 

邪么如何从服务器的响应得到 JSON 数据？ 

JavaScript 可以 H •算文本数据 

使用 eval () 手动计算文本 

il •算 JSON 数据会返回该数据的一个对象表示 

J a vaScr i pt 对象已经是动态的 . 

W 为它们 不垃编 if 对象 
4以访问一个对象的成员…… 


csv r - I 

itemDetails • response.split (,) ；~L 


然后利用这些成员得到对象的值 
需耍解祈服务器的响应，而不 U 是直接计算 


Web S 务器 
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表单 乌验证 

畅所欲言 

一 — 〆 

每个人都会经常犯错误。 

如果 lh — 个人说几分钟话（或各打几分钟 字）， 很可能他至少会犯一两个 错误。 
你的 Web 应用会对 这些错误做何响应？ 应当验 证用户 输人，如采输人有问题就必须 
作出反应。但是具体该由谁来响应，另外该做些什么?你的 Web 豇面做什么?你的 
JavaScript 又该做什么？服务器 在验证和数据完整性 方面起什么作 H 1? 


要按先 Web 豇面后服务器的优先_序完成验 诎 414 

可以验 W： 数据的格式，还可以验证数据的内容 420 

4U1 我歌复 ( Don't Repeat Yourself) : DRY 423 

T 面创建史多芈件处理程序 426 

JavaScript 之子 (id 来 430 

域性的值 n f 以是另一个 Ja vaScri pt 对象 430 

下面焚告 Marcy 的其户，指出他们的输人有问题 433 

如果没有调用 wam()， 就必须调⑴ unwarn(> 437 

如果竹焚卉消息，就要将除 437 

歃复数据足盂要服务器解决的 N 题 443 



JavaScript 


服务器 


Web 服务器 
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POST 清求 

怀疑：要把它当做朋友 

有人正在看着你。说正经的，就是现在。 

不是有信息法案自由码?不是叫做国际互联网 ( Internet ) 吗?现如今，用户在表单 
m 键人的 fr : H 内对或衧在 webuiifti h 所做的 任何点 i 郎会逍到监 m 。 监视你 的人可 
能迠一个 网络竚 理员，成荇坫想了解你意向的软汁•公《彳，也 彳能坫 一个恶盘的黑 
荠或投放垃圾邮汴的\。不论怎样，你的信息是不安全的， 除非你有意采取措施保 
证它的安全。 对干 Web 页面来说，必须在用户点击 “ Submit ” 时保护用户数据的安 
令。 


GET 沾求将 沾求参数作 为叫文在网络 h.fV 递 
POST 诂求不发送明文 

POST 请求屮的数据作到达服务器之前巳经编的 
使用 sendO 在 POST 请求中发送请求数据 
-定 要进行 检査,确保你的请求数据确实已经接收 
为什么 POSTi 汽求不能 iE 常 T. 作？ 

服务器对 POST 数据解朽 

需要告诉服务器发送 r 什么 

ff . 请求对象 t: 使用 setRequestHeader() 设 S 请求首部 


449 
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其他 

S (未谈到的）5大问题 

I 真是一个漫长的旅程……就快到终点了。 

™ 实在不舍得你离幵，不过在你离幵之前，还有儿个问题需要指出。我们实在无 

法将 Ajax 的所有内容在•本不到 60()!； (的15中仝部讲到。所以我们只好•舍弃所有 
不要求你必须了解的内容，并在这个附录屮指出敁后儿个重要 W 题。 




#1 检丧 DOM 472 

#2妥挎降级 475 

#3 script . aculo . us 和 Yahoo UI 库 476 

#4在 PHP 代码中使用 JS 0 N 库 478 

#5 Ajax 和 ASP.NET 480 



直接给我代码 

有时你希望所有代码都在一处。 

前而 已经大 M ； 使用 utils . js ， 这是我们编写的一个小工凡类，包括 Ajax 、 DOM 和事件 
工具函数。下囱儿页将把这些函数汇集在一处，允许你在自己的工具脚本和应用中 


使用。 


utils . js : 继续扩展 


484 
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1 使 ID Ajax 

^ 新一代的 Web 应用+ 



是不是厌惓了重新加载页面留给你的长久等待？ 

沉闷的 Web 应川界面是不是 it 你觉得很泄气?是时候 r ， 现在应该 U ： 你的 
Web 应 Mir ； 起来史鲜亮，就像坫反应迅速的兑而佐 HL 怎忭才能做到呢？这就 
要借助 TAjax ， 利用这 法宝， 你将能够构 违史具 交互性. 响应史迅速、使用 
史泠鉍的 imeme ⑹:用。所以別_了，利用这个时间为你的 Web 应用添加一点色 
彩，把邪呰不必耍的 ， 动作迟缓的完令 m ifii 刷新永远地捫火掉。 


这是新的一章 1 
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老式的 Web 应用 

Web ^®： 老式方法 

对于传统的 Web 页而和应用，每次用户点击贸面上的某个部分时，浏览 
器都会向服务器发出一个请求，服务器1«1’作出响应,返回一个完整的新 
页面，即使用户的 Web 浏览器很聪明，知道对图像和样式表之类的 
内奔进行缓作， m 足用户的浏览器和你的服务器之 M 还足存在笤人 M： 的 
朿 M 通信……其后果就是用户不得不为这些 完全餌 面刷新等待很长时 N» 


用户点壬了吞安 mmtmrn—r—m 



【下.尽爸芍毪只戋变3一0之条残 
f £ a !不姹爸免宅食的否綦 馴於 
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使用 Ajax 


改迸的 Web 页® 

通过使用 Ajax ，页面和应用只向服务器请求它们真正需要的东西，也就足 
豇面屮需耍修改的部分， ifuVR 这也足服务器要提供的部分。这总味咎通信 
最史小，更新更少，用户等待页面刷新的时间也更短。 

利用 Ajax， 浏览器只会发送和接收页面中需要修改的部分。 




. 否面代砝 糾連 3—个 

由列％器给磲务器 


6 P , *» 不必 S 蚩衣奁， 


有时浏览器根本不必与服务器通信。 



.來冬讲以 i 扣 S ' (象齐艰冬不電 
洌 圮器; msip 务器 

本中的一个 、 

战、 \ 


乇 …… ( if 宅 t 不佟在否® 




你现在的位置 ► 3 
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Ajax 是一种方法论 



Ajax 采用一种新的方式使用原先已经存在 
的一些技术。 

Ajax 汴不是-个全新的技术，不像 CSS 或 
JavaScript 那样要求你从头 I: 起，它也 小是一 
组盅要借助 Photoshop 才能完成的阁形图像 
技术。 Ajax 只是采用一种新的方式来考虑如 
H 使叫你 "1 •能 d 经知逬的一些技术柬完成你 
己经在做的事情。 


迈承用哽罐 


XHTML 文件 脚本 样式表 其他资源 



<多 H^ebil!% ^ 扣设斜人秀6 用过以 I ：的 
一苍 ( Sitif ) 技术， 


4 第 1 章 
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使用 Ajax 


那么怎#才能让页 i “Ajax” 哝 ? 

Ajax 坫设 II •和构 4l ! W C bij (| ft 】 的一 种心法 ， " f 以使 Web 应川 Hfi 像兑 Ifti 以川 
一样的交茳性和响卩 V: 性，对你来说这意味着什么呢?你可以 尽耐能 在客户 
的浏 览器卜 .完成处理。 你的豇 面会发出异步请求，使用户可以继续工作而 
不逄等待响 P 八另外只会更新页面上确实改变的部分。&棒的是, Ajax 页 
面是使用 私准 I nternet 技术构违的，有 巧技术 你可能¥已经知道该如何使 
用,例如: 

• XHTML 

• 层#样式表 

• JavaScript 

Ajax 应用还使用了另外一咚技术， w * rr •这些技术 ll 经出观 r — 段时间 ， m 
对你来说可能还比较陌生, 例如: 

• XwlHttpRequcst 

• mUr JSON 

• POM 


运签技术 


—个 锖求 0 

处琺锖求时伊 
户可 ％ 继续 矣 


tliereiore no ^ 

- Dumb OuebtiQHS - 


i ^) : Ajax 是不是就代表 “Asynchronous 

JavaScript and XML ” （异步 JavaScript 和 XML > ? 

^ : 差不多吧，但不完全是。因为很多被认为 

是 “ Ajax ” 的页面并没有使用 JavaScript - 气 XML . 所以 
可以把 Ajax 定义为一种构建 Web 页面的方法，使之沭桌 
面应用一徉具有响应性和交互性，这种说法更合 ii . 而 
不要过分考忠所涉及的具体技术， 

R : “异步”到底是什么意思？ 

^ : 厶 Ajax 中，可以向服务器犮出请求而无项用 
户等待响应.这就你为一 个异步请求， 这正是 Ajax 的忟 
心所在。 


: 难道不是所有 Web 页面都是异步的吗？比如 
说浏览器不就是在我查看页面的同时加载图像吗？ 

^ 2 浏 t 器确实是异步的，不过标准 Web 页面却不 
是，通常， Web 页面需要从一个报务器搞《序得到某呰 

信 息时.一忉都会停滞不动，直到服务器呤应为止 . 

除非页面做出一个异步请求，这正是 Ajax 的关鍵 

: 但是所有 Ajax 页面都使用 

XMLHttpRequest 对象.不是吗？ 

^ : 并非如此，大 f j ^ Ajax 页面确实都使用 

XMLHupRequest 对象.而 J •我 们会叨 / L 章的筅幅专门 
介绍 XMLHupRcquesl . 忸这并不是一个必要条忤„实 
际上，很多被认为支持 Ajax 的应用史关心用户交互性和 
设计，而不是莱一个特定的编码技术， 


你现在的位置 ► 5 


Download at http://www.pin5i.com/ 





Rob 需要你的帮助 


Rob 的榣漶紀念品 


来认 i 只一下 Rob 。 他把所冇枳莕都投人到一个在线的摇浓纪念 
品商店。这个 M 站行上去很不错，不过他还是逍到顾客人眭的 
抱怨。顾客点占目录页面上的缩略阁像后，浏览器陡示所选商 
品的信息之前要等待漫 K ： 的时间，简6:像足要无休 ih 地等 Kic . 
Rob 的一些用户还算有酣心，能忍受这种等待，但更多的用户干 
脆再也不来 Rob 的在线商店 r 。 


ii 个 蛋板中 
■JRdW 出售赛兵 





⑴.， viKMIU 


用户考.击一个奄兵 

的. 

个 ff 罅的 一个 

9)/4 …… 


..…券存 (if S 汙达 
个眘兵的<5襄这贫 
(% & , 
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真让人皤望……不过 
我实在£付不起功能*强犬的® 
务器，也没布足够的钱来騁淡一整 
Web 专宗。 


O 


Ajax 页面只是在必要的时候才与服 
务器通信……而且只传送服务器知 
道的东西。 

Rob 网站存在的 N 题并不是他的服务 
器太慢，而是他的页面一直在向服 
务器发送请求……即使有时并+需要 
如此。 
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WXIv •、• 


你现在的位 1 


^harpen your pencil 


以 I、' 足 R«b/t: 线商店现在的做法。从这个阁屮你能# 
出哪电有问騵? 
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Ajax 能够对这个阳做哪叫改变呢？你认为 Rob 的网站 
应该怎样做， W 把你的想法写卜'朿。 


J 0 盔$给；务器 


兔务器4歧 ( T 另一个 


用户 M -个祷 

孤 飞 


令.去子利的 

m …… 






的 JDiSLii 诠賬务器 0 
















异步应用同时能做多件事情 


of^arpen your penci 1 
、- Solution 


你的仟务足考虑怎样利用 Ajax 保佧 Rob 的网站……也就 
是不要 it 他的生意丢掉。利用 Ajax ， 可以完全去除目 


录页面 t 的贝面刷新。做法如下。 

点忐® (4 含 if 用一个 



这个厶袞釗違一个澴求 
奋兵的播 (f 


3个厶敦2衾政变 
©译. 

眘其一致 


別％器命钜务器，斧求扣的®# 
不过遠不及 否蛋 ：辑心杓问蛀 



刮圮器氓 GT - 个杂 
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你认为 Ajax 能够为 Web 应用提供哪叫好处？请在你认 
为正确的各项旁打勾。 

浏览器可以从服务器同时请求多项内容。 

浏览器请求返回的速度会快得多。 

能够更真实地渲染颜色。 

只有页面中真正改变的部分得到更新。 

会减少服务器数据流量。 

页面的不兼容问题有所缓解。 

用户可以在页面更新的同时继续工作。 

有些改变无须与服务器往返通信就可以处理。 

你的老板会更喜欢你。 

只有页面中真正改变的部分得到更新。 


j^harpen your pencil 





汴不足 所有页面都能得到 Ajax 的毎-个好处。实际上， 
有些页而根本无法从 Ajax 获益。你认为在你勾出的好处 
中， Rob 的页而代正能够得到哪些好处？ 
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Ajax 应用的好处 


(parpen your pencil 
、 i Solution 


要 UM +:， 并不足每一个豇而郎能得到所打这哔好处- 


0 


奶用爲毕请求 . 芍以砝係到茫器夺后台工0 . 
e 免©宄含贡爰剃扣齐中釣用户的工作 


浏览器可以从服务器同时请求多项内容。 

- p - 下如! tb 。 彳求扣响在的 J iSi : 夫子轚务器 _ i <? 的内容 

广、“兔 ^ TT ■可姹比1蜣贡安的！度 t 今 


V 


浏览器请求返回的速度会快得多。 
能够更真实地渲染颜色。 


觫疙•:玄译由用户毡戌器硿軔 
齐不 I 由在用 支紀。 


只有页面中真正改变的部分得到更新。 

f - J ^ A , a irJfk /. f .)*. 更体中 的 濂求, 不劣 <； . G 也垠容务芩致違 

i €多的濱求 fc /. f 子增 < 數邛龙 f . © 4芍栈 f 耳李地連彡 甸奄这奋礒求 

会减少服务器数据流量。 

< t »^^5^ HTV \ C 4. A , 4 * 毋$2译耔子苒姑一普技术. Mk / 〆 逢用 Ap * 后的兼容乜问 

一 O 沒用户记器 I ：的⑽在用■•刪 试在淛 

/ TA 0 - —" 

J # 一 

页面4不兼容问题有所缓解。 

耷的你 芍锌 兔！用户芩峙甩务器的咬在，任汰斿不砉。朱華不鲊浼用 
厂 第5#中将他#论阉螃扣异毕沭求。 


用户可&在页面更新的同时继续工作。 



一个$矛注用 


有些改变无须与服务器往返通信就可以处理。 


如冪浚去地 fi 用5~«认*的 e 用尹帑玢.邳老板 f 金 
厂 含4攻你。不过4万不客呕的笵池部縫用 A }ay ……有关 
你的老板会更喜欢你。 ci 个 ㈣ € 含货 OUT 厂 


只有页面中真正改变的部分得到更新。 

V 沒抟.在 ii 个 f ) 表中 ii _ 条基槧 二:欠 出现. 

© 4 ci — ♦.食存太 f « 5! 
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使用 Ajax 



嘭， 没错，亲爱的 ，侄 除昨所 
笮人郗布罔样的想法。现在你潘 
4达罔®多秕丨 A 是堵 捋一堪 

,糊涂。 


tliereiare no 

Dumb QiiestiQns 


: 刚开始你说 Ajax 可以改进 Web 应用，现在你又说 

它会增加服务器数据流星，到底怎么回事？ 

^ : 有时候这两种情况会同时存在。 Ajax 是一种能 

够建立请求并焊到岣应的方法，可以 网来构 建快速啥应的 
Web 应用„但是在决定异步请求和常规同步请求中哪一个 
更好时，还必项灵活一姿。 

2 我怎么知道什么时候使用 Ajax 和异步请求.而在 
哪些情况下不能使用呢？ 

^ 2 这样来考4。如果你希望在用户工作的同时继续做 
一些处理，可能就需要一个异步请求。但是，如果你的用户 
在继续操作之前需要从你的应用得到菜些信息或者得到一个 
岣应，那就要让用户等峙„这往往意味着需要一个同步请求 = 


I 15 ):那么，对于 Rob 的在线商店.由于我们希望加载 
商品图像和描述信息的同时用户能够继续浏览页面，所以 
需要一个异步请求，是这样吗？ 

^ : 完全正确 Rob 应用中有一部分——也就是查看 

不杓商品——并不需要户每次选择一个新商品时都必埙 
等待。所以这里非常這合使用 Ajax 并建立异步请求， 

| P ) : 那怎样才能做到呢？ 

^ : 这个问題问得好. to 开下一页，我们来深入了解 
如何具体使坍 Ajax 解决 Rob 在线商店的问題. 
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Rob 的 Ajax 路线图 


使用 Ajax 改造緇漶 R 站的 5 个步骤 

下向使用 Ajax 来解决 Rob 在线商店的问题，把那些没有耐心的顿客重新拉冋 
来。我们需要对现有的 XHTML 贝面 做一些修改，编写-些 JavaScript 脚本， 
然后在 XHTML 中引用这些脚本。完成这些工作后，页面将不再需要 i 新加 
栽，用户点占缩略图像时，只有那些确实需要改变的部分会得到更新。 

我们的做法如 

O 修改 XHTML Web 页面。 

需要包含接 F 来要编写的 JavaScript 文件，并增加一些 div 和 id, 

使 JavaScriptWl 本能够査找和处理 Web 页面巾的不同部分。 





inventory.html 


入一个 <div>. ii ■轉 
JawScnpt 杖找垠容 


ii 签臶略 ff :, 



㈣ 二-, 


thumSnails • > s 电含為公瑾点邊 

__缩略®译鰣鸹？的代砝 . 这 

fet 耷 RM 的《务》{|信乘珥 
利各赛兵:兔的代；|。 


thumbnails.j8 



o 编写一个函数初始化页面。 

酋次加载 R 录页而时，需要运行一些 JavaScript 脚本来建立这 
些图像，准备好-个 W 求对象，并确保豇面 d 经准备就绪。 


iirt 代砝苦诂•到楚器一 
一 ©扣 戴否面杖运 ㈠ 
imtPa $ e()&.SL 


-^- 

window•onioad = initPage; 

function initPage() { 

v _ 

u 让灰图像 
H 创建请求对象 


件钍||« 4 , 
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^ et 9 etaifl 

thumbnails.js 
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Q 编写一个函数创建请求对象。 

我们需要一个途径与服务器通信，并得到 Rob 商品目录屮 

毎个纪念品的详细佶息。为此将编写-个函数创建一个请 

求对象，以便我们的代码与服务器通信：这个函数名为 

createRequest ()„ 只要点击一个缩略图就可以使用这个函 

tmclicfc 舉碑綠$数启动一个新的请求。 

數。 / $etDetaiis() 会 {UcieatfRe 今 “est()& 數菜作 J 1 ) 一 I 

碲求的象 」 ___ 


fonctiwi v 
\\ getPetailsO 


funetil 


thumbnails.js 


使用 Ajax 


c « ateRe 4“《 st () ■& 一个工 
ft * 啟. 我们坍 反氮值用 
( i 个函啟，它含鉍逢一个 
签本的 逢用 ^ 參 求的象 。 


createRequestO 




o 从服务器得到一个商品的详细信息。 



我们将在 getDetails <) 中向 Rob 的服务器发送一个请求，吿 
诉浏览器当服务器响应时该怎么做。 




显示商品的详细信息。 

4以在 getDetailsO 中改变要显示的[知像，然后需要另一个函 
数 d isplayDetai 1 s () 在服务器对请求作出响应时更新商品 
的描述信息。 


' ••…我们将鎢写的另 
奴绣甩务器的<|患， 
毋面中。 
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修改 Rob 的 XHTML 页面 


第 1 步 ：MXHTML 

先从敁容易的部分开始，也就是创逮豇面的 XHTML 和 
CSS 。 以下是 RobR 录页面的当前版本，在这里增加了我 
们需要的几项内容。 



inventory , html 


<!DOCTYPE html PUBLIC n -//W3C//DTD XHTML 1.0 Transitional//EN M . 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd”> 

<html xmlns=”http:"www.w3.org/1999/xhtml"> 本聲洛承科络写 ( i 个 

<head> 辱 。 

<title>Rob*s Rock 'n 1 Roll Memorabilia</title> 
clink rel="stylesheet •’ href= M css/default.css M /> 

〈script src= M scripts/thumbnails . js" type=”text/javascript’.X/script> 

</head> 

<body> 

<div id="wrapper”> 

<img src= M images/logotypeLeft.png M alt= M Rob f s Rock 1 n 1 Roll Memorabilia" 
width= M 394 M height="91" id= f .logotypeLeft" /> 

<img src= M images/logotypeRight.png M alt=”Rob*s Rock , n , Roll Memorabilia" 
width=’’415" heights"92" id="logotypeRight M /> 

<div id=”introPane"> 

<p>Are you looking for the perfect gift for the rock fan in your life? 



Maybe you want a guitar with some history behind it, or a conversation 
piece for your next big shindig. Look no further! Here youll find all 
sorts of great memorabilia from the golden age of rock and roll.</p> 
<p><strong>Click on an image to the left for more details .</strongx/p> 

</div> __ _ ___^ 达个含巧 ••• 

<div id—"th\unbnailPane"> 的 •VSd 

<img src= M images/itemGuitar. jpg M width="301” height= M 105 M alt= M guitar ?, 

title=.’itemGuitar" id= M itemGuitar M /> 

<img src= M images/itemShades.jpg" alt="sunglasses” width="301" heights"88 •’ 
title="itemShades" id= f 'itemShades H /> 

<img src= M images/itemCowbe11-jpg" alt=”cowbell" width="301 •’ height="126" 
title= f, itemCowbe 11” id= "itemCowbe 11’’ /> 


<img src= M images/itemHat. jpg f, alt= 
title="itemHat" id="itemHat" 

</div> 

<div id="detailsPane M > 

<img src= M images/blank-detail.jpg' 

<div id=descriptionX/div> 

</div> ^ 

</div> ( ^ 

</body> 

( if . 


"hat" width:"300" height:"152" 

2个<山》>中放£ 备葙兵的 
^ ST 

width="346" height="153" id="itemDetail" /> 
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得到示例，开始行动。 

从 wwvr . headfirst labs . com 卜_ 钱本 书的示例，找 

到 chapterOl 文汁央 。在一•个义本编辑器中打开 
inventory.html 文件，按以卜 .所， A 完成修改。 
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body { 

background: #333; 

font-family: Trebuchet MS, Verdana, Helvetica, Arial, san-serif; 
margin : 0; 
text-align: center; 


达 4 用子 Ro 6 贡乇的层 I 样. 
式表。我们 将利用 <仏>无 

在后$的 JavaScript 代砝中 
也食用^3 


ii f i 2 _ f 多 
CSSf^O： …… 51 
以 U\^ttkd Fitst 

站下載承 
利，查罨宅整的 


p { font-size: 12px; line-height: 20px; } 
a img { border: 0;) 

♦wrapper { 

background: #750505 url( 1 ../images/bgWrapper.png*) 8px 0 no-repeat; 
border: solid #300; . 

border-width: 0 15px 15px 15px; 

height: 700px ； j «detaiK| 

margin: 0 auto; 4 •… 1 

u 


rocknroll.css 

你现在的位罝 > 
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赛 13 否接达的 U 
▲ 06 有 安的 妗正。 


患. 暑一个空奁这頜 
以 1 爱泫碲某个 眘姦时 苏 -’ 
沒®英的錨述作 | 


<oo s ftock Roil Me*t»o-ab.ia 


pg VsR(XK，VROt 1 v 0 


Ok. loo** I # 0 r per>l- « T ♦»*> 

I *•* 玷鯽 M 1«V *«r: » 馨 0 r .v wr. fi 


I：* if am y roc* nd rwi 
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window . onload 最先出现 

第 2 步：初始化 JavaScript 

需要创建 thumbnails . js ， 并增加一个 JavaScript 函数为目录中 
的每个缩略图像达立初姶事件处理程序。下而将这个函数命名为 
in it Page () ,并设置为一旦用户窗 U 加载 目录沉 ifii 就运行这个函 
数。 


0 W 齊 




* * 就在法 if 用圣教。 



initP4$e() 巧 G 录中的 备个端 >1 
® ll i onelickfj 0 



thumbnails.js 


要为缩 畴® 建交 ohclick 行为， ihKfageO &数必频 
完成认 T 兩件事。 

o 在页 ® 上 找到缩 畴©。 

缩略图包含在一个名为 “ thumbnailPane ” 的 div 中，所以可以找到这个 div ， 再在 
其中査找各个图像。 

O 为各令缩蚱 ® 建 itmclick 搴件处 lift 序。 

每个商品的实际大小图像命名为缩略图像怀题加 b “- detail ” 。例如，对于标题 
为 FenderGuitar 的缩略图，其详细图像名为 FenderGuitar - detail . png 。 这 
样就可以在 JavaScript 中得出图像名。 

每个缩略阁的事件处理程序应气将 i ? •细图像元桌 ㈦ 为 “ itcmDetail ” >的 src 标 
记设 S 为该详细图像 UUFenderGuitar - detail . png )。 完成后，浏览器就 
会使用你提供的名自动地显示新图像。 
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使用 Ajax 


p 




initPage 函数的代码乱七八捎地贴在冰筘上。你能把掉 K 的部分放 
回去吗？记住要设罝一个事件处理程序，从 rfii 在用户窗口加栽时 
运行 initPage() 函数， 


create 


onclicV. 


funct.i° n 



doC oJ»® r 


— ~ - - 


在搴 4 钍理《4中(如 . g 
k / •用 - th is - 关鍵字 AM .) 盔 t 皴$4 的的象 
的一 个引用 


handler for each : 

/ _ 

你现在的位置 ► 
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initPage () 建立页面 



thumbs = docxunent. getElementByld ( M thumbnail Pane M ) . ge tElementsByTagName ( 11 img") 


// set the handler for each image 



gw - 个端糾宅 域-次 


« 击一个臶 
略 ff 镎杖古 行 
这个數 



// create the onclick function 





.爸在一个 g ! 嘩 5 s ). 十) 用技® (象杉轻 
采饵出镨访® (本的 UR L 。 


name 


// find the ful l-size image 

^ges/' XthisTtitl^ --detail.jpg. 7 



document.getElementByldr.itemDetail") • src = detailURL; 
getDetails (this . title) ; 


7# 忘记2#铸棄之扣咢 • 
柔則你的? 4 wiScnpt 衿无 .•去 
注行。 


東逢一 


W. 器 ⑴㈣ 

@(象, 


src 
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使用 Ajax 





创建 thumbnails.js， 增加 initPage() 函数，尝试加载这个目录页面。 

在一个文本编辑器中创雄一个名为 thumbnails.js 的文件。增加第 
18 页上的代码，然后在浏览器中加我 inventory . html 。 页而加载时 
会运行 initPage ()， 你可以试一试详细 阁像的 M 示。 







i (i J. 

……金在这？ s a - 个田係。 


㉟ 知料 

i ^ ° 


To Oo 象中爯去‘綠一谇 a 


♦w — 

«aii r*- l 

■■■■■ 


• fc If IV . 


I Vs raxiv 'V I km* j 


«t « V |P- 1 •••%• 

--.. f -r •** »>«-t 

►»•-•#« A J .» ••> : 
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谞求对象特定于浏览器 


第多步：创建清求对象 

用户点击一个商品的图像时，还需要向服务器发送一个请求，要求得 
到这个商品的详细信总0不过，在发送请求之前，耑要先创建请求对 
象。 


遗憾的是，这里稍有些麻烦，因为不 N 的浏览器会以不冋的方式创达 
请求对象。不过也有一个好消息，我们可以创建 个 函数来处理特定干 
浏览器的所有细节问题。 


丁。％亵 

>□ 创建请求対象 

口 — 


接 T 来在 thumbnails . js 中创建一个新函数，名为 createRequest (>， 
并增加以下 代码。 


现成代砝 4 斿巧锼入 

不过不郎心 ;^ = 
5 ^ —聋或系聋中你犹 



这食冱闭一个蛐求的象. 
或 辛如羼 M 耷类嗲邾不 
含 (i 妁遠宏 -"“ 〖 r 。 


现成挖码 


function createRequest() 
try { 


request 


龙釗達 一个靶 的请求吋象不 
不一定 注用子辦苟闲楚器类 f 


new XMLHttpRequest () ; 

catch (tryMS, { 藥 - 神方料政.心另外一种不 

try { ^ - © 炎嘍的的象 *> 

request = new ActiveXObject ( 、、 Msxml2 .XMLHTTP") ; 

这也不钱秦垃. m 以爲來當後系一 


catch (otherMS) 

try { -< - 

request 


new ActiveXObject (''Microsoft .XMLHTTP^); 
} catch (failed) { 
request = null; 

} 如瞿代砝这行 f ，) iif . 说額 

} 有类爱 部不合 it 。 这© —个《以. 

} 迻渭用代砝知迮出璁5-个问 

延. 

return request; 
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使用 Ajax 



ttierejore no 

Dumb Questions 

R :我是不是要理解所有这些内容？ 

^: 不必， 对现在来说，你只要从大体上对各部分 

如何结合有个一般认识就足 够了。 现在的重点是整体， 
后面各章会逐步讨论有关细节。 

1^) :那什么是 XMLHttpRequest 呢？ 

: XMLHttpRequest 是大多数浏'見器对请求对象 

的叫法，可以把它发送到服务器并从报务器得到呤应而 
无項重新加载整个页面， 




: 那好，如果这就是 XMLHttpRequest , 那什么 

是 ActiveXObject 呢？ 

: ActiveXObject 是 Microsoft 特定的一种编41 对 
%， 它有两个不同的版本，由不同浏 t 器分别支持。正 
是因为这个原因，所以才有两个不同的代码块分别尝试 
创建一个不同版本的 ActiveXObject 。 

: Microsoft 浏览器中请求对象名为 XMLHTTP 吗？ 

^ : 这只是对象的类交，你可以将变量命名为你喜 

欢的任何名字，我们一直都使用 request 作为变量名。 
一旦 createRequest () 函 ft 开始工作，就不需要再担心 
这些不同的类5! 了^只需调用 createRequest (), 并把 
返回值试给一个变量就可以了。 

1$) I 这么说来，我的用户不需要使用一个特定的浏 

览器，对吗？ 

^ : 没错。只 要 他们的浏見器支神 JavaScript ,用户 

就可以运行他们喜欢的任何浏£器。 

1^) : 如果不支持 JavaScript 呢？ 

2 很遗憾， Ajax 应用要求必细能运行 JavaScript , 
所以如果用户未能启用 JavaScript ， 就无法使用你的 
Ajax 应用，通常默认情况下总会启用 JavaScript , 所以如 
果有人禁用了 JavaScript ， 他应该知道自己这样做过，如 
果他们想使用你的 Ajax 应用，可以再启用 JavaScript 支持， 
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Ajax 很大一部分只是 JavaScript 

第4步：获得雋品洋细信息 

一旦用户点击目录中的一个商品，就盂要叫服务器发送一个请求，要 
求得到该商品的描述和 i 羊细信息。我们已经得到 f -个请求对象，所 
以要在这里使屮。 

可以看到，+论需要从服务器得到什么数据，达立 Ajax 请求的坫本过 
程都遵循间样的模式。 

(?) 得到一个请求对象。 

我们已经完成 f 这个工作。只需调用 createRequestO 得 
到清求对象的一个实例，并把它賦给一个变 M；。 






© 配置请求对象的属性， 



沾求 对象杆 m 多属性畨贤设可以告诉它要迮接哪个 
URL , 使用 GET 还足 POST , 等等。需要在闷服妗器发出 
请求之前完成所有这些设置。 


笱以咅访淨求的 象余听 5 
缓出碲求 （ fe 批曳务器1 
^•一 出响 6鰣 f 的鴒访 (i .&). 

i i 芍以# 出在法 
— I 求 a^posT 沭求 # 


url s getPetails.php?iiMageId s ♦ imaged; 
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使用 Ajax 


(5) 告诉请求对象当服务器响应时做什么。 

那么服务器响应时会发生什么呢？浏览器会杳呑 m 求对 
染的另.个域性，名为 onreadystatechange 。 这个祕性允 
许我们指定一个 N 调函数，服务器对请求作出响应时就要 
运行这个回调函数。 



这个属作的 0左劣是 一 
«£裝名，_£ ，呢务器对 
磺求给出在务魷客送行 
个4裊。 


brl*get 9 etalls.php?iniageld* * iwageiP ； 




@发出请求。 

现住吋以把请求发送给服务器泮得到•个响应。 


4 命呢务器迨出 



fUHCti 

^ctPctai 


你现在的位置 


你认为为什么要 A •个名为 onreadystatechange 的域性指定冋 
调函数？你怎么考虑这个拭性名的含义？ 


用户电壬一个® 镎 


. ii 含 if 用 tA “ wi 6« a<Zs js 中 

的 - •个函數 . 


. 会含 60 濃科 

KI 一个沭求时 


磧求。 


thumbnails.js 
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发送请求 


7 ® 编 g 代码清求一个高品 
的洋细信息 

一旦知道函数需要做什么，编亏代码就很容易了。以 
下步骤对应于 thumbnails . js 屮的具■体 JavaScript 代 

® 得到一个请求对象。 


蛋中5个®緣的⑽以以 事件公 遝疗序汉用这个基 
f • ，传入破魚邊的 i » S；t 素的齡穩行. ii 軚基技@ 

_ i ^_ _ 



function getDetails(itemName) { 

必谇鈦 ii 个检奎以找係 
说求的象不为⑽“ 

由此芍以知迮鉍澧的象 
的袅5•笱问蛀。 

alert("Unable to create request"); 


request = createRequest(); 
if (request==null) { 


return; 


} 


var url= "getDetails.php?ImageID=" + 

escape() 9l 费公 I ? V 砉求 
URL 字得 菩中刁 軲右问 
«的字符。 


escape(itemName) ; 


request.open("GET" , url,true); 
request.onreadystatechange = displayDetails; 
request.send(null); 


® 发送请求。 


P - g -© 

IhflllHHHJI thumboails.js 



thumbnails.js 


L 




Rvh it / 

1 把 getDetails {) 函数增加到你的 

M 

-乂 

9 thumbnails.js 中。 


J - - a——i-*— 

'? T 1 * » 1 1 \ 

I fl 1 I 7 Ttr- \ 
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使用 Ajax 


处理清求对象之前一定要碥保清求 
对象碥实存在 

getDetails(> 所做的第 - 件事就是调用 createRequest (> 得到 
一个请求对象。不过还必须确保这个对象确实已经创建，尽管对 
象创建的细节已经抽出放在 createRequestO 函数中。 



2 如果軲珥到 
1 请求时象則将真适田 


爯体代码如 T 。 


这行代砝《佴 f * H 看求的象 
的一个玄例. 4把它试 i 



如粟 CtCAtf Rc<jMCSt() 无法得 
f.) 一个硪求的象.它含冱 
® n “ tt 。 Wfe / •如蓽进入这部 
分代砝.妖说沪出5问蛀。 
我们将亡用户$矛一个抟 
i 異, 4 iS 出 ii 个备數。 


thumbnails.js 
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请求对象就是 JavaScript 对象 


清求对象 R 是对象 


请求对象只是一个“正常的” JavaScript 对象,这说明可以在这个对象 
设贾 K 性和调屮方法。可以通过在诂求对象中放人信总 Si 服务器通信。 


TO yg 芒 

0^ 

CT - a—x 

匚 I 获得 sa 详细怙 ® 
口 二 — 了 T 


function getDetails ( itemName ) { 
request = createRequest {); 
if ( request == null ) { 

alert("Unable to create request "); 
return ; 




} 

var url= "getDetails.php?ImageID=" 
escape(itemName); 

request.open("GET",url,true ); < - 

request.onreadystatechange = displayDetailsT 
request . send ( null ); 


a 在的论如何 饵的一 
个赛*的饵鈿戊 A 。 


URL 。 iifa 笵 C 发！ 3眘兵名.^ 
凰务器知迮龙 fe 逐侪么商兵的找女 




ii 昝参數苦 : H :• 着求的象戏 们类望 
它以何神方式呢务器 。 


T 面分蘚 opend 


thumbnails.js 


0 叫” 0 方法 初始化 if 雜 


request.open( 


'4 et - 轉•子釦何发送 
數对（另一神可找 

爰 "posr ) 

• 0 

tliere 




GET 


// 


ii 4 时汸求作出响在的甩务器叇 
脚本的 URL 。 

J 


url 


true) 




theretOre no 

Dumb Questions 


:请求对象还有其他属性吗？ 

: 当然有.你已经看到了 onreadystatechange , 另卟需要向服务器 

发送 XML 或更1杂的数据时，还有很多其他属性可以使用，不过对现在来说， 
只需要 open () 方法和 onreadystatechange 。 
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I 服务器……可认®调我的 

displayPetails() p S? 

淸求对象的诚忡会告诉服务器 3 它接收到请求时耍做 n •么。其屮敁氓要的域性之 
一就是 onreadystatechange ， 我 ffl 将这个厲件设 W 为一个喊数名。这个涵数 
称为回调函数,它会告诉浏览器当服务器发回信息时调用什么代码。 



4 ett)*【ailsO 备紱 
,；| «)L r) 

务器 


getPetailsO 


<5 暑务器岣在的.浏圮器 
含 dispLA\fOetaUs()iic T - 
^ et 0 etaits() o 




i 4这一 H 爸诂 
到% # •士風务赛 

e 的 U ' 用嘟个 

代砝」 


function getDetails ( itemName ) { 
request = createRequest (); 
if ( request == null ) { 

alert (’’Unable to create request M ); 
return ; 


var url = " getDetails • php ? ImageID = ” + 
escape ( itemName ); 
request.open {" GET ”， url , true ) ; 

request.onreadystatechange = displayDetails; 

request . send ( null ); 


functilw 

13 


thumbns 


2甚_个 焱裝的引用. 
不不1_个《£老^1用 

名; i 面灰 I ；相5。 
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用 sendO 向服务器发送请求 


使用 send () 省送清求 


余 卜要 做的就足抹体发送请求，这很容 S …… U 盂使用清求对染的 
sendO 方法。 


function getDetails(itemName) { 
request = createRequest(); 
if (request==null) { 

alert("Unable to create request"); 
return; 


求 …… 


var url= "getDetails.php?ImageID=" + 
escape(itemName); 
request.open("GET",url, true); 


. request.onreadystatechange = displayDetails; 

~request. send (null); 




戍蜱沒夯懸螬求发迓銥外的 


funetiim 

Q 

thumbnails.js 




可以在 URL 字符串中发送数据 

请求对象允许我们采用多种不间方式发送各种各样的 
数据。在 getDetails ㈠ 中，商品名是 URL 字符串的 
一部分： 


var url= ,, getDetails.php?ImageID= ,f + 
escape (itemName); 

由于这是发送给服务器的 URL 的一部分，所以不耑要 
在 sendO// 法中再向服务器发送仟何其他数据。相反 , 
我们只需传入 null …… 这表示 “ 什么也没有”。 


异歩应芹 
JavaScript)^ 

单桡矣 。 
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服务器端代码……就在服务器上。 

听起来再明 w . 小过 r , 不过很多怙况下， 
你并不志要（其至 Ai 法） 编写与 Web 应用 
通倍的代码。实际上，你 " r 能要使用一个 
Li 有的程序，你 U 知道它的输人和输出， 
成者只需告诉另一个汗发小组你需要什么。 






不仅如此，可能柯•个服务器端程序使用 
PHP 编写，而另一个使用 ASP . NET 编写… 
但除 OJRL 之外，你根本不必改变你的 
JavaScript 代码。请看 F 图。 



卯迻 d 部分也奋伐的胪 11 内. 
分處的， \ 


pi 了 ISO 
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服务器只返回你需要的东西 


服务器总1针对 Ajax 清求返锣数椐 

在 *个传统的 Web 应用中，服务器对来自浏览器的请求作出响应时，总是会发回一 
个新 iKlAL 新豇面到达时，浏览器会扔掉所有 L ： 敁示的内鉍（包栝爪户已填人的 


传统服务器端交至 




Web 服务器 


Ajax 服务器端交至 

在一个 Ajax 应用中，服务器 " J •能返冋一个完整的豇而或部分! m ， 
或者只足返 M 将在 Web 页而上格式化汴显示的-些信息。浏览器 
H 完成你的 JavaScript 所耍求的丄作。 


哚务器爱4含宅成 

数搞 . <5的泉 

Hm . 

始 (I A 。 
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Ajax ! 服务器无兵的 

AjaxH: 求 ff:H 特定的服务器技术。"〖以使川 Active Server Pages 
( ASP ), PHP 或者你需要和可以使用的任何 技术。 实际上，没有必 
要深人到服务器端技术的细节当中， W 为它对千如 H 构违 Ajax 应 
用没有任何影响。 

以 T 足 Ajax 实标右到的服务器端交辽。 



c^harpen your pencil 


对千 Rob 的纪念品!1(而，与服务器的交氐需要哪哼参数和响 
应？ 


考霁犯第40頁 
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运行测试 


广 n 行测试 


编写 getDetailsO 的代码，打开 Web 浏览器试一试。 

要•确保 thumbnails . js 文件中编写了 getDetails (} 的代码。加栽 
Rob 的纪念品！ M , 尝试点 击 H 录中的装一个阁像。 




货似 M _ 

发中.了什么？豇向'怎么 r ? 怎样做才能修止这个 
问题? 
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♦ 

以下在左边列出了请求对象的一些域性。你能将左边的各个 M 性对 
佐到右边相应的作用或其中包含的佶息吗？ 


veadyStAte 

服务器返回的状态码消息，例 
如， “0K” 对 AV: 状态 202 。 

sttttua 

包含服务器发 N 的 XML 格式佶 

息。 


服务器返回的一个状态码，指示 3 

Verip ( ’nseXlVlL 

前状态，例如指示成功或所请求的资 
源未找到。 

stOtursTeXt 

包含服务器发回的文本信息。 

VesponseTeXt 

表示请求对象当前状态的一个 
数。 


tfierejare nQ 

Dumb Questions 


: 你能再解释一下到底什么 

是回调函数吗？ 

^ 2 回调* 榖是另卟菜怦夢结 
束时执行的一个 A 致,，在 Ajax 中，回 
调函数就是服务器对一个请求对象作 
出响应时调用的而軚。浏定器会在莱 
个时刻“回调”这个函数„ 


1^) : 那就是说，当服务器结束 
对一个请求的处理时就会执行一个回 
调函数，对吗？ 

^: 不是这样的，实际上每次服 
务器吮应请求时就会由浏'見器调用回 
调函数，即使此时服务器并没有完全 
处理完请求。大多数服务器都会作出 
多次响应，指示接收到请求，或者正 
在处理请求，或者已经处理完请求。 


l >T °) : 就是因为这个原 

因，这个请求属性才被命名为 
onreadystatechange 吗？ 

^ : 完全正确，每次服务器响 

应一个请求时，它会把请求对象的 
readyStatc 属性设置为一个不同的值， 
所以我们要特别注意这个属性，来确 
定服务器何时处理完我们发送给它的 
清求。 
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请求对象属性 




r *« 彎 u 費，电 

n ： 


以下在左边列出了请求对象的一些 K 性，你的任务足将各个域性对应 
到 A 边相应的作用或其屮包含的信息。 


(i 个 il 伐蒋矛螬求 6 绞宅威.现奋 



服务器返回的状态码消息，例 
如， “ OK” 对应状态202。 \ 


status 扣 statusTem!^) 



服务器返冋的一个状态码，指示 
当前状态，例如指示成功或所请 
求的资源未找到。 


包含服务器发回的文本信息。 


表示请求对象4前状态的一个 
数。 
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使用矽调亟数处理服务器返®的数椐 

示絍个商品的文本描述呢？ l 、 H 设服务器会把商品的#细信总 
作为 M 定格火的文本发送到请求对象的 responseTexU ‘4 性中。这样 • 
来，我们只需得到这个数椐并显示。 

我们的回调阐数 displayDetailsU 需要找到将包含详细信息的 
X IITML 圮桌 ， 然后将代 innerHTMU 4 性设界为服务器返 N 的值。 




thumbnails.js 

备數芍 k / •迻用左敦 
找…… 




tiicrejcirc no 

Dumb Questions - 

: 这么说来，处理完请求时服务器会调用 displayDetails ()， 是吗? 


答： 


不对，实际上要由浏览器调用这个函軚。服务器所做的只是更新清求对象的 


readyState A 性。每次这个属性发生变化时，）刘览器就会调用 onreadystatechange 属性中指定 


的 函啟， 不过现在不用担心，下一章我们会更深入地讨论这个问题, 
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responseText 存储服务器的响应 


从清求对象的 responseText 厲性得到 
服务器的响应 

我们想要的数据存放在请求对象中。观在只需得到这个数据件使用。 
我们要做的工作如 F 。 


gpfi 你现存宅 
食不 t'if 
代;&也.:3■耷爹 
系。我们 
下一聋更饵麵 
池介绍:<1$试 
备和伏备级。 


ii 行代砝得利枵放入眘兵鴿访作 
6的 XHTML 无景的一个?1用》 


function displayDetails() { 

if (request.readyState == 4) { 
if (request.status == 200) { 

detailDiv = document .getElementByld (''description ’’）； 
detailDiv.innerHTML = request.responseText; 


} 


ii f j 代砝衿 兎务器这纪的朴 ITML 沒入 

ttx# 



tliereiO] 

Dumb 


thumbnails.js 


ore no ^ 

Questions 


I 1 ®) : readyState 属性是 什么？ 

^ : 这是一个 ft ， 指示服务器处 
理进行到哪个阶段.初始值为 0. 服务 
器处理完一个请求时.这个属性的值 
将是4。 

: 这么说，第一条语句只是查 

看服务器是否处理完请求，对吗？ 

你说的没错。 

为什么每一次都必须检査呢？ 

因为弄次准备状态改变时洌 
見器都会运行 回调扁 軚。由于报务器 
接收到请求时会把这个值设置为丨，而 


答 

问 

答 


在处理请求时有可能把这个值设置为 
2或3，所以除非 readyState 等于4，否 
則无法确定服务器是否处理完请求。 

I 1 ®): 那么 status 属性呢？ 

^ : 这是 HTTP 状态码，如404就 
代表禁止访问，200代表成功，对请求 
对象做任何处理之前一定要确保状态 
码为200。 

R : 为什么状态码是 404 时服务 

器还会把准备状态设置为 4 呢？ 

^ : 这个问題问得好„下一章会 
讨论这个问题，不过你可以先考忠一 
下在什么情;兄下可以完成请求，但状 
态码仍指示存在问題 


I 1 ®): 使用 innerHTML 是不是不太 

好？ 

^ : 确实如此，不过有时这个展 

性确实很有效后面几章史深入地讨 
论 DOM 时我们还会介 灯更新 页面的 
一呰更好的方法„不过对于现在来说， 
要如道 这种方法是可行的.这一点是 
最重要的， 

Z 我得掌握所有这些知识吗？ 

关于回调函数的内容实在太多了…… 

^ : 对于现在，只要如道能够在 
回调 A 敖中使网服务器的响应就可以 
了.我们还会在第2章更详细地 介蚜回 
调 A 数.准备状态和状态码， 
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使用 Ajax 



运行测试 


编写回调函数，测试目录页面。 


在 thumbnails . js 文件屮增加 displayDetails <)。另外要确保服务器端程 
序正 在运行 <其输人输出在第30页上给 出）， 而且 getDetails () 方法中的 
URL 指叫该程序，然后尝加栽这 个 H 录!面并点击 一个商 品。 



你现在的位置 ► 


一个赛兵的.在 茂秸昜 f _) 一 
个 i 之的® 兵®镎.以及 ( i 个奄 

咎部乇硒否® 重折加 IU 


i，SROCK v Rai 








是不是不清楚服务器端程序是如何工 
作的？ 


可以翮到附录 I 寻求帮助，那电会对 
服务器上完成的 T . 作做一苎介招 £ 


http : " www . headfirst labs . com 上还和-峰作常有 
用的服务器端资源。 
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反应迅速的 Ajax 应用 


白传统 Web ® 用说爯见…… 

Rob 的豇向现在 T . 作得电加平 稳， 顾客12经开始陆陆续续地 
回归， 你巳经 U ； 它改头换面成为新一代的 Web 应用。 

Rob 原来的传统 WebS 用: 

9 ……用户*击一个商品的缩•&哆 

对要 重新加教鳌个贞®。 

O ……要芘铐很长村闳加我，©为 

毎次点击时;到览苕邡必锘 S 示鰲 I 
个“。 1 

o ...... 想獅磁应，刚、 ㈣ ⑽心⑹軸 

户必涵苓待所笮达些灸®剔新。 

% ……颉窖很怯大， Rob 兵了生奪， 

他的饯也芘光 

/ 

埒这喹(尤彖耷蓽10衣谂出^ 

Rob 新的 Ajax 应用： 

太#?……我 S 轻对 

0 …… R 改变舜®中 tg 更新的部 7 一令項 B 笮点想法？ 

分。 

% ……在后 fe 异步地加栽扭傢和格 

述信東的罔时，允许用户链紱金 
it 荧綦。 

# ……不要求用户拥笮超高速的 R 

绪注摟 才陡值 用他的 R 蛣。 
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使用 Ajax 



填字游轶 

花点时间坐 K 来好好想一想， AiK 让你的大脑开动起来。回答以下的问题，再用这些字母 
拼出密佶。 


这是坩 来编笱 Ajax 豇 rfif 脚木的 UT ,*?。 


1 23456789 10 

这种闲数会在一个过程完成时得到调用。 


11 12 13 14 15 16 17 18 

这个请求紂象 W 性可以告诉我】服务器何时 Vi ： 成处押。 


19 20 21 22 23 24 25 26 27 28 

如果服务器端有问题，这个域怍 能畀 诉我们出广什么叫题。 


29 30 31 32 33 34 

浏览器会把服方器返 M 的义本放人这个紱性。 


35 36 37 38 39 40 41 42 43 44 45 46 

如果有 W 题，可以从这个诚性得到 H 题的描述。 

用以 i 的这的 穿邊在 

下奁 诔空… ^ ~47 48 49 50 51 52 53 54 55 56~ 


49 1 31 45 13 54 10 29 23 39 33 


15 51 8 14 22 19 28 37 9 39 40 34 8 3 44 


31 9 38 14 8 6 26 46 8 39 40 24 
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Aja ) (是服务器无关的 


c^Jharpen your pencil 
、‘ Solution 


文现 Rob 的豇面忠要哪哼#数和响应？ 


问题见第31页 


1£旮译沒 XHTML 中, . j 眘兵囹(在 
的 fj 中 


@品名 

- ► 

高品 t •尊紅{|总 


W 赛 ㈣ 接 ㈣㈣ 烙 
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使用 Ajax 


填字游珙奢募 

花点时 N 坐下来好好想•想，离止 ih 你的大胎开动 起来。 N 答以下的 H 题，再用这些卞以 
拼出密信。 

这是⑴来编写 Ajax 豇 向脚本的语 a 。 

J __ A __V__ A __ S __ C__R__!__F__L_ 

~~ 1 2 3 4 5~~ 6 7 8 9 10 

这种函数会在一个过程完成时得到调 。 

J __ A __ I __ I __ 1 __ A __ C __ iL 

11 12 13 14 15 16 17 18 

这个请求对象诚性吋以告诉 a 们服务器何时完成处理 . 。 

_!__I__ A __2__ Y __ S __ T __ A __ T __ L_ 

19 20 21 22 23 24 25 26 27 28 

如果服务器端有 H 题.这个属性能迕诉我们出了什么问题。 

J_J __ 

29 30 31 32 33 34 

浏览器会把服务器返 M 的义本放人这个 K 性。 

R i __ S __ P __ 0 __ N_J __ i __ T __ i __ XT 

35 36 37 38 39 40 41 42 43 44 45 46 

如果有问题，可以从这个诚性得到 N 题的描述。 

J __ I __ A __ I __ y__S __ 1 __ l __ XT 

47 48 49 50 51 52 53 54 55 56 

A J A __ X_ _l __ i_A __ S_ _Y __ 0 __ |L_ 

49 1 31 45 13 54 10 29 23 39 33 

g U 1 l P R E S P 0 N s 1 V __ L_ 

15 51 8 14 22 19 28 37 9 39 40 34 8 3 44 

A P P__I 1 C__A_ J ： __!__0__N__S_ 

31 9 38 14 8 6 26 46 8 39 40 24 
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值用 AjaxsicjC 罔 H 做 
系件擧……天哪，实在昱太 
#7 ! 不过，不得不承认.我 
得用一种全新的方式考虑问抵 


2 设计 Ajax 应 ® 


用 Ajax 方式思考 


欢迎走进 Ajax 应用——这是一个全新的 Web 世界。 

你已经构达了你的第-个 Ajax 应用， " f 能现在 iF . m 考虑怎样修改你的所何 
Web 应用，让它们都采用异步方式途立请求。个过，这汴不是 Ajax 编程的 
全部。必浈以一种不周的方式考虑你的应用。即使让 r 异步 iti 求，也不 
能仅凭这-点就意味着你的应用足用户友好的。你如果要 帮助用 户避免犯 

错误，就需要耐幣个设计重新考虑。 
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需要 Ajax 改造的 Web 应用 


Mike 的传统 R 站 


mi 


Mike 汗始普 r - 悄写热门电影的 if 论，他把他的观点放到广网1 ： 汴广受追 
棒。 遗憾的是,他的注册豇面有些问题。用户访问他的网站时，要选择用 
户名汴键人 W 外一苎 ilf : 细 aa ,然后提交这哼佶总>1能 i 力 N 这个评论 M 站。 

这个 M 站的 M 题是，如果用户名已经被別人占用，服务器会再次响应初 
始豇面.件显示一个错误消怠……但足之前用； •• Li 输人的信息全都不见 
r « 更糟糕的是， HJ 户等待很长时 N 想看到一个新豇面，但等来的只是一< 
个错误消息，除此以外什么也没有，这 il : 用户作常恼火。 他们想 要的是 
电釤汗•论! 


破中的数戏 I■ 裘 0 •在 



W 我 B 羟笮大 t ; 主冊用户.所认很 
多用 户名 B 轻祜 占用。 所笮人 绅是达 
样处戌 注 冊的。 （5让 人想不通的是.我 
卽收到如此多的坨怨，伶能帮我蘚决达 
^^ 令 R 越吗？ / 
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设计 Ajax 应用 


Exefu：tSe 


Mike 遇到了一个人麻烦，不过既然你已经构边过一个 Ajax 应用，村 丁 -Mike 盂要什么也 
许已经有点想法广。花点时间看看下面的图，其中展示 fMike’s Movies 影评应用现在 
的做法，你认为应该怎样做？把你的想法记下来，然后 N 答这•页最 l c 面的问题，说 
说看怎怍做>1•能帮助 Mike 解决问题。 


o 一个新用户填写？ •: 主册表单。 


O 将达个老单揸交到一个 WebflB 务器。 

)51 

-^ \ 


Web 服务器 

O 一个服务器绻稃序验证料袷验注册馆患 



O ……然后向用户的 Web 洌览器返诊一个新的 WebJ 5®。 



哚务器 $ •子一 个攻逆 






••… 残老4 S •子 涿来 
的 厲摹. 兵给 出一个 


■j . 的它较'入 

破现 在邾} 6 空。 


你认为 Mike’s Movies 影 If M 站中 fik 大的问题是什么? 


要改善 Mike’s Movies 影 If 网站你会怎样做? 
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异步请求 


T i ^@ Aia x 异步 
芨送注册清求 

耍解决 MikelKiftf 屮存在的 HM ， Ajax £^ 我们所需的 XJU 观作似•大的 襄子队心两玷&严重的问蛀 

问题足:用户必须等待完全页而刷新才能发现他们请求的用户名巳经被占你记下的疼•:去 4 T -4^ ifc ^ 
Hj 。 史梢糕的足，如果他们忠要选抒一个小 M 的川户名，就必须把先 ( WlL ^ ： 

经输人的所釘 H : 他包洱输人一次。这两个问题都 " T 以使 WAjax 解决。 

我们仍然甫要弓服务器通倍来得出用户名足否被占用， m 足为什^— 

要等到叫厂》飧笱完幣个表申-之后呢？完仝可以输人- 个⑴户 名后， 八名軚发 求也 

就 h 服务器发出一个异步请求，检奔这个⑴户名，拌在! mm 接报力 ^ i'T 

可能出现的 H 题——所釘这些郎无须 [；( ifti 艰新加找，当然也 A 会 ii •掉 ni 
户 d 经输人的 K •他信息。 



( Wk 存线谒论网坫的玢丝 


逢； ' i 个妗入域軚检奢 


OP i% A 
务 jtb 


c 宇劣出规闲蛀的 

以 ㈣ 
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设计 Ajax 应用 


t| % % 9 1 ) 


做？ 达么多 R 是为？值一巷彩垅不必拕他们的 
名字和 ewallMtt 爯$金一次？达是不是笮些大 

材小用了？ 


0 


不要惹恼你的用户……永远不要！ 

在 Internet k ，可能 H 是在点击之间你的竞争者 
就会占 hHo 如果没有立即告诉用户哪里出广 
问题,或者如果你让他们乘复做某件事情，很 
可能 就会永远地失去这些 

Mike 的 M 站可能嫌不了大钱 (起 码目前是这 
样），甚至看起来对你来说并不甫要……但 
足对他的粉纹来说却有歌要的怠义。如果在你 
的帮助下他的用户不再对他小满，没准哪-天 
会有一个用户请他为 《纽约 时报》携写电影 
If 论，这可能会给他带来 6 位数的收人。+过， 
H 前 Mike 甚节不知道他的网站会把用户赶走。 
在这里你的 Ajax 技术就能派 Ji 用场广。 




方要 惹恼侪的用户 


如果你的 Web 应用有问题，一定要 
尽快、尽可能清楚地告诉用户，而且 
绝对不要把用户已经做过的工作丢掉， 
即使发生了他们（或你）不期望发生的事 
情也要保证这一点。 


thereiQre no 

Dumb Questions 

: 这个设计原则并不是单独针对 

Ajax 的，对吗？ 

^ : 没错.这适用于所有 Web 应 

用，……实际上，适用于各种类型的应 
用，不过，对于 Ajax 应用，特别是异步 
请求，很多方面都可能出问题„作为一 
个好的 Ajax 裎序 8 ，你的任务之一就是 
使用户避先这些问題，或者至少在出现 
问題时让他们知道发生了什么， 


你现在的位置 ► 47 


Download at http://www.pin5i.com/ 





规划 Mike 的应用 



现在来处理 Mike 的 N 站。需要执行以 F 5 步才能 It 他的网站电好地 T - 作，但足这甩 
没有给出每一步的 ft 体细灼， rfiHL 顺 序也打 乱了。 沾按正确 的帧序！£悱这些步骤， 
并对每一步中应3做什么 S 出一个简短的说明。 
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设计 Ajax 应用 



你现在的位置 


按正确的顺序重排这些步骤之后，再来看下面的两个图,它们描述了 Mike 应用的 
•个 Ajax 版本中的一咚交互。石•行你能不能填出下而的空，做到图表完整、注释准 
确。 
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冱數 i 淤吞矛柒 5 •子成 j 力鸟5不不含 


- j — 9以 f 泽一个 .). 的朵給 
/ 用户一神视 tiff 。. 


4 5 6*5 


这® ' —个4斿 •子. 


_攀 (，辣炎 ^JavaSciipt 

的一个 if 用. 


validation.js 


JavoSctipt 3) 兹切逢斿 
_一个 __的象。 


求对象苦外_ 




















异步可以减少不满 



你的任务是按 lF . 确的 WSUf •歌徘 这些步骤来构达 Mike 电影 if 论 N 站的一个 Ajax 版本，并填 
写每一步的说明，还要仵阁中填入缺少的 M 。 


O 

❹ 


更新注册页面的 XHTML 和 CSS。 

需要叫注册表申.增加< s c r i p t >元尜来 U 用我们将编写的 
JavaScript 代码。 

为 Web 表单的输入域建立事件处理程序 a 


if 、& m 轉. 巧以相 只问嘀 
_旁中我们 含免用 这个 

堝4 


需要-些初始化代码为豇面 h 的用户名域達& -个 onblur 节件。 
这样一来，用户离汗这个域时就会开始沾求过程。 

o 创建和配置一个新的请求对象， 


可以使第 I 章屮的 createRequest (> 闲数来创述 沾求， 然后将⑴ ^ _聋 ,c 4篆鞏坫趵么个 

户请求的 币户名 增加到 URL 卞符申，从而传递到服务器。 致.‘不过 ii 一#中辑的 

它歌 9 访的的论 # 

o 验证所请求的用户名。 


一且创违了请求对象，需要把它发送到服务器朿确保所沾求的用户 
名未被 K 他人占用。 这可以异步地次:观，从 Ifriq 服妗器检迕用户名 
时用户还能继续填写表电。 

纥吋 hw>s c ，叫 

的一个 if 用 



JavaScript 备致釗逢拉基 多 



© 报告所请求的用户名可能存在的问题， 

w 求对染返冋时，冋调函数可能更新 um _ 农 • w . 示川 p f ,检迕足&成 
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设计 Ajax 应用 


E 新注册页® 

已经有 f Mike 注册页而的基本结构，下而来具体实现。增 
加一个 < script >^ 记加栽我们将编写的 JavaScript 代码。 
之后，吋以在 Web 表单上建立用户名域，从而调用一个 
JavaScript 函数向服务器发出一个请求。 



使用开始和结束 <script># 
记。 


如果使用自结束 W < script > 
标 Id ( SlKscript />) ,有些浏览器会报 
错。对干 < scripi > —定要使用单独的开 
始和结束标记。 


< head > 

<title>Mike # s Movies</title> 

clink href= w movies•css M rel= M stylesheet f, type= M text/css f, /> 

<script src= M scripts/validation.js n typ©= M text/javascript M X/script> 

</head> ^ 

— 秦中 一样. （i — 聋埒逢歩该萎 

^^ 'Q 



下载注册页面的 XHTML 和 CSS。 

如果之前没有下栽，那么现在需要从 www.headfirs- 
t labs. com F 栽这一草的示例文件。査看 Chapter 2 文件夹屮 
名为 registration.html 的文件，然后增加用粗体&示的^ 
script 备 iU 己。 


registration.html 




成这#時电 a 


tiiereiqre no 

Dumb Questions 

l®)： 这有什么意义呢？这与上一 R :不过我们只是要发送一个请 
章的摇滚网站看上去都一样.不是吗？求并得到一个响应，是吗？ 


答 


到目前为止确实如 


此。不过大多* tAjax 应用都是 
从一些 〈 script 〉 标记和一些外部 


JavaScript 文件起步的。 


答 


对。实际上，几乎所有 


Ajax 应用都可以这么简单地描述，不 
过随着我们对注册页面的进一步深 
入，你会看到实际上可能有两个交 
互： 首先要建立一个交互检查用户名， 


另一个交互是用户填完表单后将桉下 
Submit 桉钮. 

r ^) :这又有什么呢？ 

^:你怎么考虑？你能看出来采 
用两种方式向一个 Web 服务器发送两 
个不同的请求有什么问題吗？ 
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将内容、表示和行为分离 



噗. XHTMLI 还布工作要做。用户名域的 
onblur 饔件处 J 1 稃序 嗛？我们希蜇每次用户输入一 

个用户名鲥装运行代码，对不对？ 


将页面 咚内容与行为 分 离。 

可以从 XHTML 直接调用 JavaScript， 例如， 可以在用户名表 
单域屮加-个 onblur 唞件。不过这样一来就把豇面的内容与 
其行为混在一起了。 

X HTML 描述的 适!; ( 面的内容和 结构， 也就是豇面上有哪些 
数据(如用户的名字和电影评论网站的一个描述)以及这些 
数据如何组织。而页面对户动作如何反应则是页面的行为。 
这通常要由 JavaScript 完成 。 另外 CSS 定义豇面的表示，也 
就页而的外观。 

保 iiK 内容、行为和表示相分离是一个很好的想法,即使你只 
是在自己构建一个相，简单的页面也应如此。如果你在开发 
一个复杂的应用，涉坆到很多人，要避免无息间与其他人的 
J： 作混杂仵•起，这就是最佳方法之一。 


/W^ 穸离页 w 的户笮、 

只要有可能，就应当尽里保证页面的内容 （XHTML) 
与其行为 （ JavaScript 和事件处理程序）和表示 
(CSS 外观）相分离。这样一来，你的网站将更加灵 
活，也更易于维护和更新。 





将网站内容与其表示和行为分离可 
以使网站电站于电新，对于这一点 
你是怎么考虑的？ 


A M “ 人犯 ii 彻则幽 

JflvaScitpt (uwotttHsive 3 avflSctipO 。 
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^9事件处理程序访谈 

^ 本周话题： 

你到底从哪里来？ 


Head First： 很高兴你能来参加我们的活动，事件 
处理程序。本周我们为你准备了一些非常有怠思 
的问题。 

事件处理 程序： 是吗？我代想知逬是什么问题。 

Head First： 实际卜•，有个问题所有人都在问：你 
到底 从哪电 来？ 

事件处理 程序： 嗯，我 M f- 来 HECMA (欧洲计 
算机制造商协 会）， 这是—— 

Head First: 噢，对不起，我的意思是，你从哪里 

调用？ 

事件处理 程序： 这个嘛 . 我想 EC: M A 的人" 了能 

希望我讲讲他们的故事,但是如果你坚持我不讲 
也罢……我通常会从一个 X HTML 表申.域或按钮之 
类的东西调 H1， 有时也会从窗 n 调用。 

Head First： 那你就足从 XHTML 页面调 用的，对 

吗？ 

事件处理 程序： 大多数时候是这样。 

Head First： 我也是这样想的。既然如此就不叫争 
论广。我们都听说过这里最先- 

事件处理 程序： 等等，沾等一下！什么•论？ 

Head First： 是这样，我们沾教过 JavaScript， 他 
发蜇说他能调用你。说什么行为调用行为……真 
是胡说八道。 

事件处理 程序： 哦，你说的竹定足通 过编 柙指定 
_|f 件处理程序。漂亮， JavaScript . 

Head First； 通过编程？这是什么意思？ 

事件处理 程序： 要知道，我实际上只是 一个诚 
性—— 

Head First : 嗯？这与 ECMA 有关吗? 

事件处理程序: . 可以用 JavaScript 设置。不， 

先听我说。你了解 DOM , 对小对？ 

Head First: 嗯，不是太 r 解……这不是后面•章 
的内容叫？ 


事件处理 程序： 不 r 解也没关系。请注意， 
Web 页面上的所有一叻都只是对象。如输入域和 
按钮，它们都只是带有属性的对象。 

Head First ： 当然,我们以前见过一些输人域。都 
很不错。不过，按钮另当別论，他从来没回过我 
们的电话*…- 

事件处理 程序： 嗯，不管怎么样， onblur 或 
on 1 oad 之戈的 杉件会通过这 些祕性 ij 事件 处理程 
序绑定。 

Head First ： 你的总恐是说，就像 XHTML 屮在 
一个输人兀素上指定 onblur = "checkUser- 
name ()" —样？ 

事件处理 程序： 完全 lH 确!这只足输人域的 -个属 
性。你只是告诉浏览器要运行哪个函数……你知 
道的，也就是如何处理这个事件。 

Head First ： 我完全搞不愔了…… 

事件处理 程序： 那好，你 hJ •以使⑴ j avaScript 为一 
个对象的属性賦值，对不对? 

Head First ： 你足说小必从一个 XHTML 页而指定 
亊件处理程序,是吗? 

事件处理 程序： 没错!可以在 JavaScript 代码中直接 
指定 . rfii 使！ K 面的内容和结构与行为分离。 

Head First : 哦，这真足太不可思议了。但是刚开 
始怎么运彳 ^JavaScript 来桁定啦件处押程卬呢？ 

事件处理程序 ：嗯， 关键就在这里。你有什么想 
法吗？ 

Head First ： 我个太确定。来问问我们的听众 

吧 …… 

最开始怎样运行一段 JavaScript , 而是不在 
XHTML 页面中引用一个 函数？ 
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onload 逋早发生 


设 M wiMdow . onload 事仵处理程序 
认编程方式 


我们希望加载注册页面时运行-些 JavaScript 代叭，这说明要 
把这个代码作为事件处理程序关联到最 V •的 If 什之一 
window.onload 0 

«r 以采 m 编 fV: 方式，通过设? tW i ndow 对象的 on 1 oad 来文 
现。但是如何做到呢 ? 下面来看用户访问 Mike’s Movies 奶 if 
网站请求注册页面时到底发生 r 什么。 


首先，芹户将匆览粽导航到; Wk 的注渺 




我想知道它有没笮大宗 
吹缚得筹么祷…… 


registratlon.html 


别% 器请 ^ XHTMC ； 
供再 ®. 


..... 風务》氬 ® 


http://headfirstlabs.com/.../registration.html 


然厉，匆览器扞拎解祈页 W , t 黃求其中 ❾芹的 
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扣舁穷件是—个脚本，韌览粽会解析洚个脚本，创 
建对象，并执行斯有>包言在任何菡数中的诤 
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' HT ^ L 毋 fi 丄•的科右一 



也 P 軲玄义5函套 1 
厶裝中的每 句今技 
^ ft * t if 用 C 笏不 


话出现沒圣盎;^外辦 
以 ^ I? — : t «| Pi2avaScupt^ 


最厉， 知载并_祈3 BI 抨的斯有实件诟, 湃览粽 
$ i ^. window . onload ^^,并 f 房伊注掀为处琪该 

事忤的白势^ ^ 1 ^%. 

4 / 1 和*糝， 
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初始化 Mike 的注册页面 


&数之外的 JavaScript 代码含在锿 
取脚本对迗行 

我(门希⑵设 S —个事件处押 程卬， 使得一旦用户加我注册 Uiifd 就 
运行这个闲数，所以需要为 W i ndoW 对象的 on load 域性指定一个 
函数。 

另外为 r 确保豇而一加我就指定这个#件处押.程卬，只志把这 
个陚值代码放在 validation.js 中的所有函数之外。这样一来， 
用户在豇向' k 做任何1作之前会先完成这个赋值。 



validation.js 


ii 个代紐<5砂&敎由讲 ....；；• 韻器 

C ^ window.onload = initPage; 
ii 行代砝苦访别玷器 

• 士用户處科表 # 丄•的 function initPage () { 

username ^ 

checkHsernameO S ) 


2 H 代砝苦到圮器一 s 扣载宅否矛丄•的 
科苟走棄軚 t ' l 用 iiutPaw * 老 


document.getElementByld(username).onblur 
checkUsername; 


ii 泉釗 濃斿黾 ^ 
碡求的象的焱數 
稍后坫釗 i ， i 个 


泛 f 也采用铒疗方 式痄玄 
、一个箏4处理沒4 : , 


function checkUsername() { 

// get a request object and send 
// it to the server 


function showUsernameStatus() { 

// update the page to show whether 
// the user name is okay 


蓽 5 t 扣蓽 6 脅将镱由 '付论 
jetEiewentByJO ,, 的现存來 1兑. 
« f 5鹆它衾这 if 
中充# t d 的一个无棄杖芍以 

"5 。 


达个& & 古存洌 免器泽['臾务 
器的咬6居 iii 否®。 



创建 validation . js 的第一版 0 

在一个文本编时器中创边•个新义件，名为 validation , 
j s ,并增加以上所示的函数声明。 id 住要把 
initPage (⑽数献给 'window 耐象的 on load 域性！ 
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……时芨生3什么 

这一步有很多书愔要做。 r 而来详细分析，确保所有事件确 
实在我们希望的时刻发生。 

首先…… 

浏览器加栽 XHTML 文件时，<3以玲1:>标1己告 
诉它加载一个 JavaScript 文件。该脚本文件中位 
十函数之外的所冇代码会立即执行，浏览器的 
JavaScript 解释器会创建函数，不过这苎闲数内 
的代码还不会运行。 



window , on load 语句将 in it Page (> 闲数指 

定为 一个杯 件处理程序。一旦 XHTML 中引用 

的所有文件都巳经加载，在用户"]•以使⑴这个 

Webin ' 面之前将调用这个闲数。 

if ii 整 t 柘碭4黾'主.不过鰣笱 d 喳部 
含存用户毪栘矣 ' W 4 否面 i 至 t 箱宅成， 




i n it Page ㈠ 函数运行。它找到 id 为 **user- 
name” 的输人域。然后，将 checkUser- 
n a me 阐数指定到这个域的 on b 1 u r 价牛。 

这 •在 •XHTML 中设背 onblur = " checkUser - 
^ ame ()"是一样的。 不过这里的做沾史简洁， 
因为它分离了代码 (JavaScript 函数)与结构和 
内容 （ XHTML ) 。 
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服务器端需求 


再问一次， window 对象是什 

window 对象表示用户的浏見 


: 那么是不是用户一旦请求一 

个页面就会运行 window . onload ? 

^ : 没那么快。首先，洌览器会 

»析 XHTML 和 XHTML 中引用的所有 
文件，如 CSS 或 JavaScript 。 所以脚本 
中位于轟軚之外的代码会在 window , 
onload 亨忤中指定的 A 軚之前运行。 
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thereiore no o 

Durnb Que8ti9ns 

:这就是可以在脚本文件中为 
window . onload 指定一个函数的原因 
吧？ 

^ : 完全正确 ， XHTML 页面中引 

用的所有脚本会在 on load 事忤触发之 
前读取，接下来， to 发 onload 事件之 
后，用户就可以真正使用你的页面了。 

: 我认为必须调用 

JavaScript 代码才能让它运行。那么 
谁来调用呢？ 

^: 这个问题问得好。必須调用 

JavaScript 函敫中的代码使之运行。但 


是对于没有放在函敫内部的代码，一 
旦測 JL 器解析到那行代码，它就会立 
即运行。 

: 但是我们应该做个测试，证 

明确实如此才对，是不是？ 

^: 没错 = 在认为应用设计能正 

常工作之前一定要先做测试 • 

1 ^) : 但是这个代码里什么也没有 

做。我该怎么测试呢？ 

^ : 这也是个很好的问题，如果 

代码没有生成一个可见的结果，可以 
求助于值得信赖的 alert (> 函数 . 


在服务器上 


在测 bUlMike 注册贝而所做的所有工作之前，采要先检奔服 
猫。 服务器需要从我们的请求中得到什么？我们希望从服 
务器得到什么？ 


_户战_户名 & 

用户名 


0 : 


‘okay” 或 “denied’ 


“用户名巧用 • 器巧 
® . 如 lii 个用《名3 

经波 占用. fi ' Jii ® " aemed 





O 



在线服务器端帮助 

妙 X 记住， 可以从 http :// 

www . headfirstlabs . 

com 在线得到服务器端 
示例脚本和安装帮助。 
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运行测试 


下面来测试这个新的注册 页面。 

首先确保已经完成 rregistration.html 和 validation.js 的所有修改，然后在浏览 
器中加栽注册页面。看上去没有太大不冋，是不是？ 

init Page (> 函数没有任 M 见的结果 ， checkUsername 0 函数则根本没有做任 M 
事情……不过我们还是需要确保用户进人一个 username 域，然后再进人另一个域时 
checkUsername() 确实会得到调用。 

尽管 alertO 的效果不是太好，我们还是在下面代码中增加 了一些 alert() 语句，确保编写 
的函数确实 得到了 调用。 


window.onload = initPage; 
function initPage(){ 

document.getElementByld("username").onblur = checkUsername, 

alert ("Inside the initPage () function"); 


function checkUsername() { 

// get a request object and send it to the server 

alert(’’ Inside checkUsername ()); 

) 

function showUsernameStatus() { 

// update the page to show whether the username is okay 


下面就来试 一试! 


山 u()& 款句， 

用…… 



1 -• •►•^^* 1 ***® «•■» -■ ^ r » 

-—- 

pc//hcadArstl 

CtM MNtf»QrO 






****• cf *^ ku '« rtum * a ^ —— ■— 


validation.js 


. 另外进入 we 域 

燃启逢孖个表鞏域的 
I 含代用 cAfcfcUs 打 nawe() c 
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可重用性问题 

Ajax 设计的某些部分总 I 一样 
的 . 毎次郐是如此 

我们 1_1 经两次使用 " Twindow - onload 和 initPage <> 函数 ：一 
次用十 Rob 的摇 m 纪念品商店，佴一次就是这里⑴干 Mike 的注 

巧在 m 人 mm 練作. 
”； FMf 用她 
中的狀— 作-用 


册页面。接 k 来要创建一个请求对象,它在注册页面中的I：作 
与在 Rob 摇滾 W 站中完全相同, 

实除上， Ajax 应用中的很多部分都是 •样 的。不过不能就此满 
足，你的任务之一是适当地构达代码，从而不必反复编写。下 



面来石 Mike’s Movies 影评 N 站中如何创达和使用请求对象 


辑式筹筹。 


viftis® 

不阌. 


页面加载并处理应用特定的任务以及初< = - == - - - 

始化。 〆 

O 应用特定的 JavaScript 得到调用，需要 
向服务器建立请求。 


Web 服务器 
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createRequesttl 总是一桴的 

几乎毎个 Ajax 应用屮都需要一个函数创达请求对 
象……我们已经有了这样一个函数。实际上，这就是 
第1章中给出的 create Requestor*。 下面再来更详细 
地分析这个函数，讨论如何在各种情况下对应各种类 
型的荠户浏览器创违一个请求。 


尽管这是独立于浏览器的代码.但 
在 Mac 上的旧5中还不能 运行。 



UTut!,I^LT^ 



〆 


的用户 • 


这當试.右利找 
的一神薄法。 


function createRequest() { 

try { 

request = new XMLHttpRequest() ; ^ — 

catch (tryMS) { 
try { 

request = new ActiveXObject ( 、 'Msxml2 . XMLHTTP "〉 

} catch (otherMS) { 
try { 

request = new ActiveXObject (''Microsoft .XMLHTTP ,/ ); 
}catch (failed) { 
request = null; 



这朽代砝龙碘求纥矿给碣用代砝 


return request; 


tlierejore no 

-- Dumb Questions - 

:那么这个请求对象到底叫什么？ 

^ : 大多軚人都称之为 XMLHttpRequest , 但这相当拗口。另 
卟，有些浏見器可能有不同的叫法，如 XMLHTTP . 把它称为请 
求对象确实更容易，还可以避兔过于强调刮览器的特定性，大多 
It 人对它的看法是：这就是一个请求。 
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避免复制粘贴 



复制粘贴好的代码重用方法。 

Mike's Movies 影评网站中的 createRequest {) 函数与第 I 章 
Rob 网站中的 createRequest () 函数完全相同。如果把第 
1 章所编与 W 本中的有关代码 k 制到这个新的 validation.js, 
就会变得很梢糕。这样一来，如果现在需要做哼改动，你 
就必须在两处分别进行修改。想想看，如果有10个或20个 
Ajax 应用又会怎么样？ 

发现多个应用中有一些共同的代码时，要把这些代码从应 
用 特定的脚本中取出，把它们放 人一个 ■屯用的工具脚本 
屮。所以对丁 - createRequestO , 4以把它从电影网站的 
validation . js 中取出，创途一个新的脚本。町以将这个新脚 
本命名为 utils . js ， 再把两个应 IH 中共同的代码放住这个新 
脚本文件中。 

这样一来，以后编写的毎个新应用就可以引用 utils . js ， 另 
外还将引 • 个 ili 含 Hi 特定 JavaScript 代 ㈣ 的脚本。 
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createRequest() 




本中。 







utils.js 
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1^) : 为什么先引用 Utils . js 然后才引用 

validation , js ? 

^: 大多啟 情况下.应用特定的代码 

会调用工具代码。所以最好确保浏11器先 
解析工具代码.然后再解忻可能调用这呰 
工具代码的其他代码，另叶，这也是一种 
保证有纽织性的好方法：先是工具代码, 
再是应 ifl 特定的代码„ 
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问 


: 但是我还是不明白 

createRequestO 到底是怎么工作的 1 这 
是怎么 回事. * 

^ : 问得好•我们认为 

createRequest ( >可重用，并<}巴它子多到 
一个工其脚本中这是一件好事，饵是我 
们还必項知道所有这姿代码到底在做什么 


并伺的 代碚， 
把适些代碚奕 
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创逮 • 个新文件，命名为 u t i 1 s . j s 。将上--挚编写的 
createRequest() 阐数(或者 61 酞上的这个函数)增加到这个脚本 
中，保存所做的柊改。 


一个勾 






utils.js 


打汗 registration.html, 增加 - 个新的 <script>fei 己来引爪这 
个新 JavaScript 义件 ut i 1 s • j s 。 


相 _ «后吻 
这沒掌 [ 个 & 


<head> 

<title>Mike f s Movies</title> 

<1 ink href =// movies.css w rel="stylesheet" type^ #/ text/css/> 

<script src =" scripts/utils • js " type =" text / javascript " X / script > 

<script src 二 "scripts/validation.js" type="text/javascript"></script> 
</head> 



4 ll lL 经在 validation.js 屮增 / j|l fcreateRequestO, 一定要确 
保删除 那个函数。 createRequestO 现在只能出现在你的 utils, 
js 脚本中。 



registration.html 


S 

on 
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St 

e 

Qu 
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好应用可以在多个不同浏览器上运行 


创建一个清求对象……在多个浏览器上 

现在来深人分析 JavaScript ， 明确到底发生/什么。 下曲逐步讨论 
createRequest () 的扭一部分到政做 r 什么。 



utils.js 


创建函数。 


认在用中的 
何池方 i ? 用。~~ 


疔先构达一个函数，任何其他代码需要-个请求对象时都可以调用这个函数。 

▼ function createRequest() { ▲ _ 不於我 f) f 堯用 ㈠ 么读法來饵 f 1 ) 它.一 

// create a variable named "request" <r 右 "5 决求的象的一个农例 ， 其表现 

} 蚤 I 一 样的。 V . 


尝试为非 Microsoft 浏览器创建一个 XMLHttpRequest £ 


迗軚縫珥鶬用代{|耷 
麻頌的洌 K 器# gf } 
刼爷闸迓琿 W 堪逢 


定义一个变敏，名为 request， 尝试为它指■定 XMLHttpRequest 对象类型的-个新 
‘久:例。除 「Microsoft Internet Explorer 以外，这在.几乎所冇浏览器卜.都吋行。 



尝试为 Microsoft 浏览器创建一个 ActiveXObject。 

在 catch 块中，我们尝试使用 Microsoft 浏览器特定的语法创建一个请求对象。但是 
有两个不间版本的 Microsoft 对象库，所以必须分別尝试这两个对象库。 

C try { t . . 

request = new ActiveXObject("Msxml2 .XMLHTTP"); 

V cat ch (otherMS) { …… 不过! 签咒鈑本 

y tr y { 一小 7 .囟的 f 
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© 如果所有 else 都失败，则返回 null 。 

我们尝试了得到请求对染的 3 种不同方法。如果解祈器执行到这一步，说明前而 
的 3 个尝试都失败 f 。 所以将 request 声明为 null ， 然后 ih 调用代叭来决定如 M 处 
理。记住， null 是指什么也没有。 


request = null ; 


运赶在蕞：的 

o 


体. 由匕濤定 如句祺咅浮# 


的子 0Wictoso^<*') % 8 


集成在 一起，返回 request。 

最后只剩 ■ 返回 request 。 如果一切正常， request 会指向一 个淸求 对象。否则，它 
会指向 null 。 

function createRequest() { 
try { 

request = new XMLHttpRequest(); 

} catch (tryMS) { 
try { 

request = new ActiveXObject ( M Msxml2 . XMLHTTP ,/ ); 

} catch (otherMS) { 
try { 

request = new Act iveXObject (''Microsoft .XMLHTTP M ); 
} catch (failed) { 
request = null; 

} 、 H f 

不 m 运食 q } 

一个结羃 . 卯迻 . o . 基） 

C -^ 



巧子 ^texne 

^plo7ei 


㈣ ⑵鞠•卜 k 


return request; 


} 


■ 


BULLET POINTS 


不同浏览器使用不同的语法 
束得 到请求对象。你的代码 
应当考虑到每一种类型的语 
法，这样你的应用就能用十 
多种不同的浏览器。 


不论使用何种语法来得到沾 ■ 
求对象的一个实例，这个对 
象本身的衣现郎是一样的。 


如果圯法得到沾求对象的实 
例，则返回-个 null ， it 调 
用代码来决定该怎样做。这 
样比生成一个错误更为灵 
活。 
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Ajax 的核心就是交互 


Ajax 应阁设计包紿 Web 页® 

认及服务器端程序 

Mike 的注册豇面已经有一个 Web 表单，我们还必须弓这个表单交互，得到用 
户的用 户名， 另外如果所选的用户名 d 经被占用，还要更新! W , 显 示一个 
错误消息。 

尽管会 ih 別人来考虑如 H 编写服务器端代码，但我们还是应该知道要向服务 
器端代码发送些什么……以及如何发送这些信息。 


F 面来看完成用户名合法性验证需要哪些步骤。其屮大多数步骤郎与 Web 表单 
或一个服务器端程序的交互有关。 ^ 


尝试得到一个请求对象。 

如采洌芘器无法釗建清求则 S 示一令繁告 


得剴用户在表单中键入的用户名 


*3 d . ctetteRt / fuest () T-iiil 
泮 #, 辦以 ff 戧们匀 3 来 
勉 ii 个10。 


{ if 耷 w « 6 表犁 iS 


碓保闲户名中不包宮对 HTTP 清求来说布问 16 的字符。 


将用户名追加到服务器 URU ^ - 

告诉洌览器 g 服务器响 S 清求时谁用啷令&数。 


告诉洌览器如何向龈务器龙送清求。 
发送清求对象。 




埒苟$ 多呢务 器交至 


ii # 岁薄部 4 妁 3 余孃务器接供 
用户名。 


m “®戊函 IT 。 爯过几 
毋魷含鹐写&个焱盘. 


势的 /jaX 设计大多有利 
子矣互 。 必顼 m 迖—个 
Web 页 W 芴用户矣互， 
S 要逯过勝旁粽 辚移序 
与必旁送辆矣互 a 
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chcckUsernameO 函数的大多数代 Pi 都乱七八梢地贴在冰箱上。 
你能把它们再重新放好吗?大括号掉到地上了，它们太小了检 
不起来。你 " T 以根据需要来增加更多的大括号。 



Var theNaroe = document.getElementByld("username").value; 


validation.js 
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验证所请求的用户名 


' chcckUserNameOW 数的尺部分代叭邯乩匕八梢地贴^冰筘 

上。你的任务足甫新组织这咚代码，达立一个能正常工作 

的函数。 


function checkUsername() 


request = createRequest(); 



1? 光.巧以 il 用“中的 


<id 洱到 *■ 个 後承 

&數失政 "5 . . # . 

…… 鰣以1 爸桁用尸 


} else 


jetE^wentByW^t f 4 ) 表輩 
iiih ' usexname 的无棄。 



utils.js 


叫“*€用 A 只{本 
铒入的内容 



request.onreadystatechange = showUsernameStatus; 


f 把用户名邊加 f .) URL c 


request.open("GET", url, true); 


request.send(null); 


iif 苦贫洌诂器如仞发达螬求。我 m 璉用 
) - QET " 表鞏方法.#龙它运 iMf ，) URL 变 f 
中£含的 URL 。 iif 的 “ tT “ r 表•子将耳螓 
祕盔 达磺东 一曳务器 检奢用 户名时用户芍 
以活这试？表辇。 


' s ，以 (）| M 坫鴻求的象 

^诠％务器， ” “ U 象牙我们不含 


vA UiflCion 
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B 前为止 B 经傲到 


现在我们已经-切准备就绪,输人一个新用户名时就会向服务器 
发出请 求。 



以“* 葶4样盎村 
hv«Sc«>t 的漘 用, 


还熏要傲到 


J 咖 Scupt ；i 过 “t‘U. ， S 中的州“咖 “ 川⑽ 



淺緙5斜么用户名。 


现在只需准备好 ih 服务器对我们的请求作出响应。 



%务器冱 S ' 一个轉孑 


validation.js 


^ .. … 

S 1 il 基數 i 护雨乇 • S 5■•成 W 耷否 

茶不含去夹用户的分墓总。 



tliereiO ] 

Dumb 


are no o 

OuestJQns 


l^) : getElementByld() 到底做些什么？ 

^ : 在系 5 章和第 6 幸讨论 DOM 时会非常详细地介绍 
qetElementById () 0 不过对于现在来说，你只需要了解 
这个 A ft 会返回一个 JavaScript 对象，表示 Web 页面上的一 




那 value 呢？这又是什么？ 


答 


! getElementByldO ^ ft 返回一个 JavaScript 对 
表示一个 XHTMI . 元素。与所有 JavaScript 对象一徉, 


get Element Byld () 函 It 返回的这个对象也有属性和方法, 


个 XHTML 元索， 


value 属性包含元素中的文本„在这里，就是用户榆入到用 
户名域的内容。 
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运行测试 



运行测试 


在继续下一步之前先确保前面的工作一切正常 


JavaScript 还完仝没冇电新页曲‘，小过我们可以洱使用一些 alcr …语句，柃仵 
check U sername ( 涵数足否按我们预期的方式工作。 

在编辑器中打开 validation . js ，/ KcheckUserName (⑽数屮增加以 F 所示的代码。这与 
前阄做过的代码贴练习足一柞的，+过这里增加 f -些 alertOiS 句來帮助跟踪浏览器 
做 f 些 什么。 


输人这鸣代码后，接下来保 V 文什并 在浏览器中加我页而。仵川户名域屮可以输人你 
想输人的仟 H 内容，你会肴到将以示所冇这呰提示。 

function checkUsername() { 

request = createRequest(); 
if (request = null) 

alert("Unable to create request"); 
else 

validation.js 



alert ("Got the request object ")； 

var theName = document.getElementByld("username") 

alert ("Original name value:" + theName); 

var username = escape(theName); 

alert ("Escaped name value:" + username); 

var url = "checkName.php?username=" + username; 

alert ("URL:" + url); 

request.onreadystatechange = userNameChecked; 


.value; 

…… f] 

迮存启 s 运 t 5桫名。 


request.open (''GET M , url, true); 
request.send(null); 


} 


} 



hll|r/ /b«aClflrtlUb«-<Ofn 
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异步应用的表现与传统 Web 应用不同，调试时必须考虑到 
这一点。 

异步应用不要求你等待服务器的佐答，你也小会从服务器 
得到一个完整的饭面。实际 h, 在异步应用中， Web 页而 
与服务器之间的大多数交互对用户都是完全不可见的。如 
果用户的 Web 浏览器在执行 JavaScript 时遇到某个叫题，人 
多数情况卜它只会停 f 来,而你对 f 发生 r 什么一尤所知。 


对此，使用 alert 是一个很好的办法，可以跟踪浏览器未能 
吿诉你的 问题。 alert 会显示浏览器看到了什么，这样你就 
能知追) H 户键入信息的间时在后台发生 r 什么。 


K . 一 c 我出$这 


. 笱％犹震 
aleitO 这句。 


在异歩痄中，总体赖子豚旁粽皆诉你出 
现3茏个洵韪。要由你弗确定是爷存在洵翹, 
并％ —种有势:的方式怍出响应 a 
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请求对象属性 


清求对象将你的代码连狻到 We b 浏览器 

现在只剩下编写代码,服务器对请求作出响应时浏览器将调用这些代码。 
在这里，请求对象就要发挥作用 r 。 利用请求对象,可以告诉浏览器做什 
么， rfriil«r 以用它要求浏览器对服务器发出济求，并得到结果。 

似坫这到眩如 M 完成哫？耍 UMt ， 请求对象只是一个普通的 JavaScript 对 
象。所以它可以有属性，而且这些属性可以有值，其屮有一些非常有川的 
诚性。你认为我们的冋调函数中需要哪呰 M 怍呢？ 



蓽 9 葦将 t 沒》地付论 XMLe ^ 在 


, esp 0 M s « XML 坫 £ t 
其中 fet 哚务器的岣在 


崦夯器让 Jf {秦求的含0出多•上咳 
p 刑览器 f 麦用 》«hSuu 尿伐來 
5矛鐄求正让存 S 让理’主貪 馮期 
於 Cff 一个符段 V 


7 ” S <? T *« 中。 

不 (2 也衮邛 


oniead^statechAn^e ^ % *4'®*) % 器去嘴务器 
畦在一个鴻求 S*Hf 用嘟个 蚤數。 


劍兒8續用 status 和 statasTejrt 柒苦诉<$ 
的代砝.呢务器鰣迖纪的 HTTP 杖态“ 
扣0代表 “or . 防发 务器火仂正 
常.或老扣 4 代表"未找到”.此时.萊 
多器乇 :名我 f.j ,科湞求的 URC 




readyState 

r 

responseXML 


匆览粽 m 过績求对象的屑 
惟僙代碚得到勝旁粽的响 
良 
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g 乌 浏览 H i ! 信，而不是服务器 

可能 m 容砧这 么说： 服务器发送 一个 w 求对象。” m 唞实 t 并 
非如此。实际 h , 你要与 Web 浏览器通信(而不是服务器），再由 
浏览器与服务器通倍。浏览器把你的请求对象发送给服务器，而 n . 
在将响佐数据发回到 Web 豇面之前浏览器会解释服务器的响应。 



Web 浏览器 


validation .js J 

cficcfaUs<TnAme() 3b 敦' ' 逢用沒求的象的 

哚务器， 


洌圮器鸟莨; 
http 仿 ，:m 


苋务器畸在:.看求的 
时象的备 ft . «启沒 
s/ioi»U.«jnawieSut«s() 
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^hoNUsetnAmeStatus()^ i? & 裝 fj validation. 

用颯务器的唤在 5 新否 if 、 


Please register to access 
reviews: 


准备状态 


准备状态深入剖析 


浏这 器使川 济求对 象的 r e a d y S t a t e M 性来舍诉回调闲数请 
求处十其生命周期的哪一个阶段。下面朿具体了解这足什么 
意思。 


3 I 磺求的象的:信备 杖态， 
tead^State 诔作中。 


decfeUsdNAwK ) 函數切連 


createRequest () ; 


request 
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u^State 冷 I 的 .说 明硪求 3 婭治备 
科 a 以盔 送。 


request.open{"GET", url, true); 


, — 

广 readystate^^ 

请求 I 
正在处理 j 


甩务器 1 在 让遝磺 求的古 0 出响在. 
xeAd^State 1 ^ 2 0 碎在冬郝提供5苟荠咬6 
的作 .6, 4祛供一个杖态砝， 


^这个符段.老沒下載纠讀求对 
象.江呆畸 E 裝42沒右宅 f : 沒 
备婷. 2不秸叆用， 


现沒务器让疼宅鴻求 
數搞芍 以迻用5 。 


request.send(null) 


在这个过《中.廣务器含在 
不同的 纠多:免发®嘀6。 
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浏览器回调代码 


浏览器 I 子服务器的响应锣调 
你的&数 


每次请求对象的 readyState 属性改变时，浏览器都 
必须采取迖呰行动。它会做什么呢？它会运行诂求对象 
onreadystatechange 辑性指■定的闲数。 


縳用 ca 个焱袅 .. ••器龛 



function checkUsername() { 
request = createRequest() 


’《 i 基邛玄 ^omead^gtatechan^e 诔作的老名 
逐數名 不秸宅 ts 紀.妖不含戌用个晁數 


function showUsernameStatus() { 

一 " - 4cl 

if (request. readyState 


xesvo^^f 1 eKt ^ 

tt 务磊 1 ® 的 
i^to 

•• Ota /' . ( i 沪用 
p 名笱以尨蚩。 


if (request.status ==C2QQ> ^ 
if (request.responseText = 


K 曳 务器让理诘豪 


l okay 77 T^f' 


// if it’s okay, no error message to show ^- ^^ ^ 


else 


// if there's a problem, we f 11 tell the user 
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alert (''Sorry, that username is taken ."); 

wUidUticm. js 中。 


validation.js 
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运行测试 


将 showUsernameStatus () 函数增加到 validation . js ， 然后在浏览器中加 
载注册页面。 

尝试输人非 “ bill ” 或 “ ted ” 的任 H 其他用户名。浏览器会显示前面为 
测 UtinitPageU 和 checkUsernameO 函数增加的所有提示。 


0 


Mtp:' /h — 鲁 

0« *» Otjfrci 




p%. 料减以 

不象矛铕茯。 



Mip；/ 




Mip :. 1 /Ktatfllmtobsxon 




现在尝试输人 “ bill ” 或 “ led ” 作为用户名，会得到 
showUsernameStatus (> 显示的错误消息。 



如 f 龄入 .air 或 - te j- 

，，逢 #用户名域妖含 $ 

S 绞右 人用迗 
个用 户名: •兰哳过 


确保一切正常 / T ?， 接下来去掉 checkUsername () 中用来测 R 代朽«—- 
所增加的所有 alert (> 语句。只留 FcheckUsernameO 中报告无 
法创述请求的 alert (> 语句，以及 showUsernameStatus(MMI 


涊 t 卿 ㈣ 


来报汽用户名 Li 经被 占用的 a le r t () 语句。 
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能奏效吗？ 


向 Mike 展示 Ajax 注册页 i. 

一切顺利。不过,当把所有代码交给 Mike 时，尽管他接受 
了这个改进后的新注册页面，俱还存在-些问趙。 


78 



我想傀原采邡样$金入我的 岱惠， 还是会龙 
生商样的擧情。 按下 “ Register ” 按狂时.洌 
芘器拕我所笮的工作邾兵7 f 


t yam motft t 


矣生 3 什么？注册页 
窗里炒的所有工作靴 
浼3电？铍忽昤： J 鸣？ 

豐長怎么考虚的？ 


■ 
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现在， Web 表单向服务器芨送清 
求布方式 

假设一个用户按你预想的做法 工作: 输人•个用户名，当异步 
请求发送到服务器并得到处理时，你的回调函数 / H 运行，而且 
用户能继续填％表单 J 二的代•他信息。一切都很棒，都在你的 II - 
划之屮。 


不过，假设用户实在太急干得到 Mike 对4影 《Iron Man》 的冲 
论，他们只是填入 r 用户名,而忽略了表单上的其他域,然后 



ti ' Register " 0 此时会发生什么？ _ 

"""" 用户馀 入 - 个 用户名 。一 

-个沣步请求发送到服务器来 验证这 
个 m 户名。 __ 


用户 & 击 Register 

用户忽略了其他成 
提夂表单。_ 


哚务器 个鲶钲 # 求二 ■较 
用户魚逢 "5 1叫 〆 ’ . 整 ' 
w «64 l 輩含1送到里 


含这 ( F —个 tf 的扣否面.苒 
中不&含用户64试？ 的分句 
c 尹一个抟{異祚出用户 


服务器返矽一个新负面。 

服务器对表单提交作出应答 
个（空的）错误农单。 __ 


i ✓ o 
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要预计到可能有意料之外的事情发生 




Frank: 嗯，我们无法避免用户忽略某鸣输人域，不过也 
11* 可以避 免他们走在请求的前 ifti 。 

Jill： 你的怠思足说验 iiFJII 户名？对,那很好，但是怎样 
才能做到呢? 

Frank： 能不能简申.地禁用 “Register” 按钮，直到服务 
器对用户名验证済求作出响应为止， 

Jill： 这样可以解决这个 H 题,但是看起来还需要些别的。 

Frank： 比如说，他们提交表单太快了,所以只要禁||•.他 
们提交，问题就能解决。 

Jill： 是这样的，你不认为我们需要让用户知道发生了什 
么吗? 

Frank： 我们禁用这个按钮时他们自然会知道发生/什 
么。那时，他们就应当填写完表单，而不是直接去点 
it ? “ Register ” 。 

Jill： 但是你不觉得这可能会 ih 人有些糊涂吗?如果用户 
填写完衣中.，成荇根本小想努力去填V这些域，那他们 
只能采呆地坐在那里，什么也做不了,而 a 他们根本不 
知适为什么会这 H 

Frank： 那好，需要 U: 他们知道应用正在做工作*显示一 
个消总来告诉他们怎么样? 

JHI： 义来一个 alert? 这也会 ih 他们不高兴的， 只+ 过方式 
不 M。 术一个阁片呢？叫浏览器发出请求时吋以显示一 
个图像…… 

Frank： ……而在验证用户名时再显示另一个图像。 

Jill： fx, 如采我们使用一个图像来显示用户名是否 
接受，还可以去除用户名有问题时显示的 alert 提示。 

Frank： 太悴 r! 既有视觉反馈，而1不会出现烦人的弹 
出窗11。这种做法我喜欢! 

80 第2章 


系远也刿假设 
芹户会按你的惣 
法你亊幘……要 
按鋅你好—切规 
划/ 


Download at http://www.pin5i.com/ 







设计 Ajax 应用 



验证请求时显示一个“正在处理”图片。 

向服务器发出一个请求来验证用户名时,我们将在用户名域旁边显示 
图片，告诉用户正在做什么这样一来，他们就能知道在填写表单的过程 
中发生了什么。 


SetElementBuJd^ 丄•去 g ⑽ 
煞5 。糾用@个函數 giy •汸 
个 ㈤ 否石工 .的一个元景 


的你 t ) 3的代 
该 .U 以 丁砰 
处. 5鈦宅一 
歩打一个勾。 



function checkUsername() { 

document.getElementById(” status”）.src = M images/inProcess .png 

request = createRequest 為个 _ 權⑴宅 

*•* 荔个 M 。 




完成验证后显示一个状态消息。 

-旦请求对象返回，町以在回调确数屮眭示另一个图片。如果用户 
名可以接受，这个图片就能指出这一点《否则，我们将 a 示一个错 


validation.js 


3 蜱 一來芍 
以猓脒《〖《* 1 线 
出穿 C . 无 
由一个曼_:拿亮 


function showUsernameStatus() { 

if (request.responseText == 'okay') { 

document. getElementByld (’ status'), src 

} 


如簾兎务器个用户 名芍以 
韙受的$孑 ii 个®，兮 。 

’ image s/okay, png' ; 


else { 

„ a_Lort f^-Sorgy- ； ~~fe-hat usor~name~ irG — feaken ■ 

P J 9 

document. getElementByld ('status'), src = 


4- 


='images/inUse .png'; 

个 

S - 子 ii 个 gl ,4。 




_ 

你认为这种方法怎么样？这是否遵循内容与衣示分 
离的原_?你能做些改变吗? 


validation.js 
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分离.分离，还是分离 


fic 果在 JavaScript 中改变了 ©僬， 

显不是饫拕求示鸟行为 •：《 在一起7? 





一定要保证将表示放在 CSS 中，而行为放在 
JavaScript 中。 

X H T M L (V 储结构和内 >>• ， ifii C S S J . V : 1处 
理表示部分，如阁像、颜色和字体样式。 
JavaScript 所处押的〗 fi 坫 ifti 完成的 I : 怍： 
也就是豇向的行为。将这苎混在•起意味着 
设1十人 M 无法修改图像，因为它在你的代码 
内部。 W 外程序员必须处押 . 豇面创作人员使 
用的结构,这绝对+足件好事 # 


尽管沣作总能如此， 但只要 允许,就餓 
把表示部分放在 CSS 屮，使用 JavaScript " 
CSS 交 a ， 是直接改变页 而的衣 示部分。 


下 I 为处理中的各个伙态分别劍 
建 CSS 类…… 

汴朴 • 接改变一个 fti 像， r 向把所有图像洋细信息都放迮 
CSS 中。打开 movies . css ， 件 增加以 RTSS 选择器。 

个赉 c . 4 4这墊密祅逢 S 


在 css 中律 


I 





I . . . existing CSS •… 

f#username { padding : 0 20px 0 2px; width: 198px; } 

)#username.thinking { background: url( M ../images/inProcess•png"}; 
#username.approved { background : url(”••/images/okay.png"); } 

#username.denied { background: url ( f, . . /images/inUse.png M ) ; } 
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设计 Ajax 应用 


. # 用 JavaScript 修改 

CSS 类 

现 ^JavaScript + 洱忠要 知道阁 像名 ，路径成有X：如何 
显示处理图标的任何信息。相反，我们只需知道3个 
CSS 类分别表示处现中的各个阶段。 



51户名芍以戏蚩 

J 




罗 ^usernanie.thinkmg 
*»username.approvcd 
^usemame.denied 


这犹 43 个挪炎名 



用户名 e 硪！用 



现作 ."f 以（洱-次）更新 JavaScript。 这一次我 
if 1 U 改变 css 戈 iftH 〈达迕技改变 m 像。 





function checkUsername() { 

Tiocument .getEi'ementByld ( l *3-ta , b , u3 ,1 ) .ere - "ima 中 

document. getElementById("username") .className 

request = createRequest(); 


'thinking"; 




validation.js 


function showUsernameStatus () { .一 _ 

... 记 0 茗去对芒戏戋 .$ ff 嘩的 

if (request.responseText == M okay M ) { > '、 

Tioeumont ^got-ElementByld (■ ll 3tatu-s- J> |. sre - ''ima^eWokay^pm) 51 ^ 

document .getElementByld ("username”）.className = "approvrd ”； 


else { / 

ale-rt- ( u &orry7~~rtiat nta-eg- name~ts~trQkon. M ) ; — 

document. qeLEirEnu^uLDyld ( H &Ldtob 11 ) . sre g ~-images / inUse ..pAg ft ;. 

document. getElementById( ,l username M ) .className = "denied ’.； 
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你的原则 



着。 我打 IR 用一个©谁表 示过稃 掩示器。达 
样一采，在 css 中 r 薰设«不罔的类采 a 示达个©佴的 
不罔郎分。达 纛咪蘑 ST 认更少地加栽©佴.而3玎认 
爱饫地完成改変。咁上*很不铑.对不对？邡幺请对 
代 码戗必 g 的妗 改采达到达令 B 的，好唣？ 


的节迖芟 css 扣姑 3 錡诠 .现在 
CSS 中只尹一个 ff (象 


改变？我们不 f 要讨厌的改变 f 

Mike 的 Web 设计人员做广很多改变……但是他们没釘改变表 
4各处理阶段的 CSS 类名。这说明， 你的所有 JavaScript 代 
码仍能正常工作， 疋须任何更新!通过将内容与表水分离, 
另外将这二齐 Lj 行为分离，改变 Web 应川就能容钻得多。 

实际 I :， CSS 任 M 时候都4以改变，我 fN 甚至不索要知道这 
一点，只要 CSS 类名保持不变，我们的代码就能继续顺利地 
运行。 


笮、泰矛和行为, 
迗样可％儇你的 
应痄夷为炅泠 a 
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设计 Ajax 应用 


R 在造当的时候允许注册 

有广过 程指示器后，余 F 的只足在页面加载时禁用 “ Register ” 按钮，当用户 
名可以接受时，洱启出这个按钮。 

为此 H 沿再对 validation , js 做儿处 修改。 


禁用 “Register” 按钮 a ^ - t t u " 

Hi 户■•次加我豇 ifil 时， H 彳户名尚末检丧。 所以岈 以在初始化代码中 .滚妄辁入嗥. 


即$用 " Register " 按钮。 




function initPage(){ 

document .getElementByld("username") .onblur = checkUsername; 

document.getElementById(’’register"> .disabled = true; ^ / 


启用 “ Register ” 按钮。 

如果用户名可以接受，用户准备注册,需要先启用 “ Register ” 按 
m 。 m 迠如果用户名行 m 题，则需要重试，此时应当保 
持 - Register " 按钮禁用。为广吏方便用户操作,如果用户名被拒 
绝，就洱把输入焦点移回到用户名域。 



validation.js 



^11 OllUWUOCTI. ltcailicz^ V-GL L. UO V I \ # — . 

^Sistej 存往 

if (request.responseText == "okay") { 

document .getElementByldC'username") .className = "approved"; 

document.getElementById("register") .disabled = false; ' 


的用户名 
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试试看 


- 行测试- 

确保已经更新了 validation's 和 movies.css， 然后加载 Mike 的注册页面，看 
看是不是有如期的表现。 





缺入一 个用卢名的 . m 
•子@个迂今处理囹圬 






dpi 

— CSS 中引用的图像文件在 Head 
Watch U ! First Labs 的 download 文件夹中。 


这个® J 4 苦诉 
你 ii 个用户名 


-定要从 Head First Labsf 〖〖到 Vtlft 的 /|i 例义件 
火， tiW 过松 指承器1书像。 
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设计 Ajax 应用 



…… 

)6 3 达个评论 
我轼不会去看邡个电彩 
? . 玎认节省20块钱。 


价||«垠(舞秦' 


现沒仿 的玢丝 sj 以 


列箱 他的; fit •孕了 


现在的页 W 


••… Mike 的服务器验证用户请求的用户名时， 
允许用户继续工作。 


參 

♦ 


••…通过禁用不安全或不应使用的按钮，可 
以避免用户犯错误，并在确实需要使用这些 
按钮时将其启用。 — 

…不会用烦人的弹出窗口惹恼用户，但仍 - 

能提供有用的视觉反馈。 

你现在 的位罝 ► 


7 


， ㈣ 化 上 
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查词游戏 



崔馆游戏 

现在花点时间坐 下来， 让你的右粘活动沾动。这坫 一个 标准 
的査饲游戏，所有答案都可以在这-拿中找到。 
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设计 Ajax 应用 



以 F 标签描述广改进后的新注册页面中发生的愔况， 
所饤这些杯签郎掉到地 I. 你能把这叫标签放作 ra 
屮正确的位 S h 吗？ 


科一个嘁的 


芍以得 f .) 杖备和 


鴻求的 fe 6绞釗運 . fSl 
匁中备个属作中 i 2 沒耷裝 
轉和 (4 忌 。 


；^ ta ^^ r^n 一 


I 

你现在的位置 
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了解准备状态 


q 标爹贴奢寡 

一^以 F 标签描述了改进后的新汴册 沉向屮 发生的_ 

1情况，所■这料纟签脱⑽地卜」。你能 H T # ^ 0 ； J g.J ^ fS 5.[ 

\ 咚怀签放保 141 中 』E 确 的位筲上叫？ 萁中备个译作中 C 2 沒耷數 | 
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3 JavaScript 擧仵 


回应你的用户 



有时需要让你的代码对 Web 应用中发生的事件作出回应 ……这就引人 了事件 。如 

件是指仵页面 h 、 浏览器屮甚至 Weh 服务器 I . 发生的某个事情。不过只知道事件还 
不够……有时你还希 望对事 件作出响应。通过创建代码并注册为事件处理程序，就可 
以在每次发生一个特定事件时让浏览器运行你的事件处理程序。通过结合事件和事 
件处押.程序，你就能得到交互式 Web 应用。 
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Marcy 的瑜珈理想 

—切从瑜珈孖餘 . 

Marcy 刚刚开办 f — 个新的瑜珈健分会所，特別 向向程 序员和技术人员。她 
希望能有一个网站展示她开设的不同级別课程和上课时间，还希空这个 M 站 
能够提供某种途径允许新客户登记课程……所有这呰要做得很酷，而辽要 
简单明了。但是她•点也不知道泫如何构建这样一个 W 站……所以该你来大 
显身手了。 



为了 U: 你对所要达到的目标釘所认 m, Marcy 简略地_出了要在网站上显示 
给客户的豇面的草图。 初级.中边 


< y - /一： 
〆 二一 .一 Iz-: : 


⑶ S 二. 

不过技 S •子■來个澴沒的这炫彖坭 


鈉绨写 1 


你见过 «序8冯？他们玎不 JI 笮射 心的人…… 
我®了达个小 f ®, 不过我 想拕它変忒一个能怕 
遘压 S 的高枓技 R 站。你能帮忙唣7 
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JavaScript 事件 



设计贴 


现在把 M a rcy 的粗略设计变成希望在你的 Web 浏览器中看到 的豇面 (还记得 
吧？你也是一个程 rf •员> 。 在这一 •下 向有很 多磁贴，分別表示一个 Web 页 
面 的+同 部分。你的任 务是保 Web 浏览器中摆放这些磁贴，组成 一个芥 起来很 
棒的豇向\另外，看看能不能适当地设计这个网站，使得客户点山 it -级课杩 
时 U 氺所 选课程 的介绍和图片。 


本章的余下郐分 
軚袅婁軟達 ci 个 
玛站.鰣以 磷考 
惠尤许伢值 
娜奋拳代：丈时 

黑啓郃分.耳璜 
沾鸟《务器 ilfl . 



Intermediate 

-- _ [ 




■■■■■■ 

■■■■■■ 


Intcrmedi 


Welcome 


miMTtfS 




Advanced 


你现在的位罝 
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设计 Marcy 的网站 




- S1 你的任务是在 Web 浏览器中摆放这哼磁贴，组成-个 fife 来很棒 的豇面 。另 

外，要适当地设计这个网站，使得客户点击某一级课稈时 na 示所选课程的 
课程表、介绍和阌片。 

以 C 不 / “ 致 ㈣ u 



表。戧们将璜 
用一个磺求的 
象榷兴乘茗珥 
到 ci 个《«表。 

……遠 f 贪 S 务 
{?. 伐的—个介绍。 


$子这疗表的. 
魚忐 EntotL ^ (£ 
将迻用户进入 
-个扣奇蛋。 


f 求 个这 ⑽糾表。 


达_耷将貪现 si 搿孑的设 1 •十. 不过 你完含 
9以嫩签挺変.贫现饬 1 3 的设 <•+. 
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JavaScript 事件 



假设你想构建 96 页上所示的 M 站。你认为客户点击不 M 按钮时会发生什么，另 
外 Marcy 的 WcbU ( 尚与服务器之间需要哪些交互，把你的想法写在下面空白的地 
方。 


Marcy 所教班上有一些服务器端程汴员，他 ffl 能构逮我们盂要的程序…… 
mii 必须告诉他们到底要构迮什么，需要什么怍的服务器端程序？ 


Web 页面 


Web 服务器 




足不足 厌嗜 了让人花的节 
ft ' 正&你•好的选择_ 


Tue I Wed I Thu ■ Fn 
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Ajax 的核心是交互 



H 不是厌偁了让人 4 &职茯的节 
fr 课稃正足你*奸的选择, 


抬钮金侖臌务器宕 A —个沭衆粢膂花銪逢的戊桴 


； T •©的戊趕历 S 成？ 5 T 敍雷龙认畈各 St •老來 d 哆历 ST , 妗簿奇签 


Marcy 所教班1•.有一呰服务器端程 Mf: 员，他们能构让我们 W 要的程序……仉是必须告诉他们到底要构达 
什么，需要什么样的服务器端程序？戧们電鋈达样一个 裎存： 它舣得一个这程名.钱 
后拢供茗神营记表。妨0 经有这 楫一个奁钇* 辇 • M 以角 > 点击一个 


你认为客户点 ilH 、 同按钮时会发生什么，另外 Marcy 的 WebuH 与服务器之 W 需要哪些 
交 5 ：，你的任务就足把你的想法记下来。 


介绍 ㈣ & 个 ㈣ 的 


纔“心 .*多§ 

\ 


Advanced 


IHHH K^SI PffiBB Ki^W |^Q| j 

Emmmmwmwmmmwmi 

B3SSE33 HH ^DH HI HHIHHI 

E ^ CS^^SI LS^tlSl 


5 个耔爸页 I 更淤贡否的内容 
部分。 


' Web 页面 / 

巧 f U f 巧这 ㈣ -个介绍 。 ;iSTfto & —个薔逢齡纽 •.. …不过 

正络的谌歿&达狳犛务*鴣枝萍。 


J Web 服务器 

ft ‘ s 螬求必译发 iil 给甩务器不过戏 
0不 f fA ^ ax 来貪现 ii 一魚。迖个螬 
求芍以4 一个正 常的同涉碲求 
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JavaScript 事件 


tliere«ire no 

Dumb Que8ti9nrs 


l ^) : 我的想法与你的答案完全不同，可以吗？ 

^: 只要能明确需要向腋务器发出一个请求来登记各 

个不同的瑜珈课，而且能认识到苺个标签页应当提供一个课 
裎表和课枉介绍，这就可以了，不过有些细节还是很 馍糊， 
左边的这些按钮是做什么的？另外需要一个异步清求得到各 
个课 权的信 息吗？ 

R : 图中摆在上面的是不是标签页？ 

^: 当然是•标签页是一种很好的方法.可以让用户 

不仅能看到不同的选择.而且可以轻松地点击各个选择来了 
解史多内容 = 

1^) : XHTML 没有标签页控件。我们是不是得买一个第 
三方工具之类的控件？ 

^ : 不需要，我们将完全使用图片 、一 呰漂亮的客户 

端 JavaScript 和一个请求对象从服务器得到课<2表。 

| v ^) : 但是确实有一些工具包可以提供这个功能.不是 

吗？为什么不直接使用这样一个工具包呢？ 

； 工具包很不错.但是最好知 道 script . aculo . uj 或 
mootools 之类的工具包在底展做了什么。在这一章中，我 
石将完 ftt 立地构建一个简单的标签页控件 
来，以后当你希变使用一个工具包时，就会知道成层到底 
发生了什么，而不会完全依麯于别人为你编写 JavaScript 。 


当然，如果你用的工具包不能满足你的需要，还能加以絛改 
或者编写你自己的控件。 

R : 看起来并不是什么新内容……前面对电影评论网 
站是不是己经做过类似的工作？ 

^ : 没错.确实如此》不过在电影评论 H 站中， Web 页 
面的交互性要弱得多。用户注册后，页面和代码就会完成所 
有工作。而在这个网站上，我们会有更多的 交互： 要处理多 
个不同的按钮点击，明确按下了哪个桉钮……这里有很多新 
的交亙性问題„这正是这一章强调的 重点： 事件和交互性， 

斤糞>要体赖子任 
何 X 兵包，餘并 
你5/经琪解3工 
兵包的 底层 代 苑 。 

洚样 — 系~^弟亊 
犢浼有按预期的方 
徊竽展，埜穌熊靠 


这样一 ' 
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Ajax 涉及大®现有技术 




请苓 一7 ……达里一半郗 JlWeb 设 it 和#遍的 
JavaScript 。 我认为我们是采学 Ajax 的，而不是一 
大堆擧件和 tfi 人的瞄本。 




Ajax 确 实大部分都是 JavaScript. 事件和大星烦人的 
脚本 T 一 

大多数使用异步请求的应用中，处押 .Web 豇面和豇面卜. 
对染的代朽以及! /il 成基本 J a v a S c r i p t f I ■:务的代码会比请 
求对象代扒多 得多。 H •体的沾求对象代叭可能只是- 
个回调函数和牡件 处押程 卬屮的儿行 代叽。 

不过确实不能把一个应用简单地划分为 “ JavaScript ” 、 
4 Ajax ” 和 “ CSS ” 。它们会相茳结合协 NT. 作。所以 
即使这一章大部分时间都在与 XHTML 、 CSS 和事件处 
理程序打交道，但你确戈在构建 Ajax 座用: 能够快速 
响应而 MJH 户友好的现代 Web 吒用， 


y^tJavaScri pi 




?CH 丁； V * 厶和 CSS 3解得 
鉍真有接、 K 有痄 。 
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JavaScript 事件 


Ajax 应用不 R 是各组成妓术的简单堆积 

Ajax 实际上是很多相当简单的技术结合在起: XHTML , CSS , JavaScript 和 
DOM 等技术 （ DOM 将在后曲的章打中 M 论）。实际上，如果仔细看 Mart ' y 的 
应用，其中大部分工作并+足特別针对 Ajax 的。这 M 有 XHTML 、 CSS 和 
JavaScript 以及需要时才增加的异步请求。 


Fig 


$ 





▼ 


RmnERS 


Beginner 




Intermediate 


Advanced 


「 Welcome Beginner Cntermcdiotc Advanced 



埔啪打诏 


I 

食？瑜珈课柃土是你 * 紡的选择 . 


Mon 




I 

5pm 6pm 

X 


X 



1 6pm-7pm 






8pm-9pm 




X 

_ 

1 - 

J c - 广 r 



Web 服务器 


Web 页面 


的象， 




的亡 《 个这沒的 i 内容®板由 
XHTML * 现。我0将妁用一个兵碜碲 
求洱到这个 XHTML . 不 (2 鬼务器的喊 
在只是一 # xnm 0 
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Marcy 的 XHTML 页面 


Marcy^XHTML 


以下是 Marcy 页面的 XHTML ……其屮已经有所需 JavaScript 文件的一 
些引用，还包括表示页而不同部分的一些 <div >。 可以从 Head First 
Labs 网站下载这个页面以及第 3 章示例的其他代码。 

曲妗是第 2 肇中 ft ) 瀘的工龙 j 件 

<head> 

<title>Yoga for Programmers</titl^; 
clink rel=" stylesheet" href =,, ^<go/yoga .css" type=.’text/css" /> 
<script src="scripts/utils.js" type =,, text/javascript"></script> 


{i- f ^ ^utils.je 

增扣一签扣圣款。 


<script src="scripts/schedule.js" type="text/javascript ,, x/script> 
々 head 〉 ^ 卞将存心切这个左 _ 


<body> 

<div id="schedulePane"> 


蚤® 中宅威工作 f 郭分笆 
含在 " scheiuLe ? ane div 中。 


<img id="logo" alt="Yoga for Programmers" src="images/logo.png" /> 
〔 > <div id=”navigation"> 


个 

含 蚤否在 
这的明薄。 


<img src="images/beginnersBtn.png" alt="Beginners Yoga" 
title="beginners" class="nav" /> 

<img src="images/intermediateBtn.png" alt=I"ntermediate Yoga 
title="intermediate" class="nav"/> 

<img src="images/advancedBtn.png" alt="Advanced Yoga" 
title="advanced" class=_’nav’’/> 

</div> 


'杉 I 


这 个心含表承 
S " 的 4 个® 辟。 

<div id= ,, tabs"> — 

<img src= M images/welcomeTabActive.png" title="welcome" class="tab" /> 

<img src=’’images/beginnersTabInactive.png" title="beginners" class="tab” /> 
<img src="images/intermediateTabInactive.png” 
title="intermediate" class="tab" /> 

<img src="images/advancedTabInactive.png , ' title="advanced" class="tab" /> 

</div> 夺 iif € 扣这枝 斿妁莕个 

这枝签矛一个这杈表。 

<div id="content "〉 

<h3>Click a tab to display the course schedule for the selected class</h3> 


</div> 

</div> 

</body> 

</html> 


两站下載 
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JavaScript 事件 



运行测试 


看看使用 Ajax 之前 Marcy 的页面是什么样子。 

从 Head First LabsN 站下栽第 3 章的示例。打幵 classes . html ， 看看 Marcy 的贞向是什 
么样。现在还没有交互性，你可能会右到一个消息，告诉你无法找到 schedule . js 。 没关 
系，我们很快就要违立这个文件。 


&墊 c 泉罨 I ：去(象祅爸贞的®薄。 

它们和 CSS 。 


迖螫巷工 •去砝宕 

用户期望的方式 
行出 A 左。 





你现在的位罝 


103 


Download at http://www.pin5i.com/ 





事件 = 交互性 


擧件是交至性的兵鍵 


Marcy 的页面需要对客户作出反砬。她希望当客户点击一个课程时，会 
迠示一个不同的课程表和课程介绍，并至可以使川 上卜义特定图片柬 强 
调一 个菜申.项。 _ _ 


i ••下完辞 安 田片 (Context — 
speuiic ~~ jTTpAics) i 我们构逢 
的一 个木: ‘4. 表•子客户猝軾杉 


所有这些就构成了一个交互式 Web 豇面。按编程术语来讲，“交互，糾-个菜鞏场丄‘的含赶变一 
式”表示你的豇面能够响应特定的事件，而事件就足发生的事情。这苎 t ® /4 ° 


啪怡可能由用户、代码、浏览器共至服务器触发。 



用户被$个# 

食 fet 舉_ . 


..... 不 a 如菜4事 

4让 if 技璆. 釗％器 
杖含把 ii 墊 搴碑盔 送给 
你的代砝。 


JavaScript 
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JavaScript 亊件 


♦ 








pncllck 


PtiltOCUS 


， n“lm 


ptiIpuJ 


onnjMUrie^Vel 


pnniouse<>ut 


«n submit 


pniesu?e 


prienov 


大多数如件名都做到顾名思义，从杯汴名就可以很好地 r 解杯件的 
作用。你能将以下事件与它们的用途对应起来吗？ 


如果希望在服务器端程序处理表单内容之 
前先验证表爷，可以使用这个事件。 

如果希望在用户禁用了图像时提供声音反 
馈，可以使用这个唭 怍。 

如果沿嗜在用户点击图像屮的某一点时放 
人示阁像的某一部分，可以使用这个事 
件。 

如果沿望 ih)H 户知道增大浏览器窗 u 的宽 
度会影响他 ff ] 的视觉体验，可以使用这个 
事件. 

如朵希窀在用户移出一个菜单项时隐藏子 
菜申-，可以使用这个事件。 

如朵冷 ^ Uh ) H 户知道所选文本域的输人格 
式， 》 r 以使用这个舡什。 

如染沿望存:⑴户将鼠标移到某个菜单项时 
改变这个菜中.项的颜色，可以使用这个事 

件。 

如果希嚷在用户开始使用表申-之前以弹出 
窗 U 形式给出表单的一些提示信息,可以 
使用这个事件。 

如凇沿喏毎次在一个特定域中输人数据时 
邰付这个域进行验⑽，以使用这个事件。 
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事件概述 


命 


♦ 








oneiv^v 


大多数私件名都做到顾名思义，从私件名就可以很好地了解事件的 
作用。你的任务足将以下事件与它们的用途对应起来。 

如果希望在服务器端程序处理表单内容之 
前先验证表申.，可以使用这个私件。 

如袋希望在用户禁用了图像时提供声音反 

馈，可以使用这个事件。 

如果希望在⑴户点 占图像 中的某-点时放大 

显示 图像 的某一部分，可以使用这个唭件。 

如果希架让用户知道增大浏览器窗口的宽 
^度会影响他们的视觉体验，可以使用这个 
事件. 

如装希鏆在用户移出一个菜单项时隐藏子 
菜单，可以使用这个事件。 

如果希望1上用户知道所选文本域的输人格 
式，可以使用这个事件。 

如果泠望在用户将鼠标移到某个菜单项时 
改变这 个菜申 项的颜色，可以使用这个事 
件。 

如果希望在用户开始使用表单之前以弹出 
窗11形式给出灰单的一些提示信息，可以 
使用这个事件。 

如采希 塱每次 在一个特定域中输人数据时 
都对这个域进行验证，可以使用这个事件。 
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JavaScript 事件 


将 Web 页®上的事仵连狻到 
JavaScript 中的擧件处理程序 


你 l _ L 经用过 window.onload 事件来触发 WebjJl •面 卜.的大曼初始化 .1: 作 ， ifii 
乱曾经使用 onclick 事件来处理用 户点击 图像的动作。我们 》1 以使用这哔事 
件以坆 onmouseover_|f 汁将 Marcy 瑜咖页面中的不同部分 ii •接到我们将 
编 S 的 JavaScript ^ 数。 


^ ^ ^ schedule. )s ^tf 
f ^……后承几否軚 
去铒？ 2个# 本亡件 


利用 window . oiUod 專件,芍以4用户只 , 本 
迻用否铯初诒化灸枣.斿痄宅苒他專 



㉟ 以難 ，•嶋 - 




initPageO 


^E3 




showTabO 


= T ? 


⑻輪 




showHint () 


3 
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初始化事件 


使用 window . oMload 擧件初始化 Web 资 
® 的其余交至性（擧件） 


你 Li 经两次使 fflwindow.onload 来初始 化一个 51 • 面。在 ■Marcy 的瑜咖 (K 



^ 因 为我们希雀保 ii 行为和沟容分离 
是蚂？我们不希望 XHTML 中湛杂驀 
onclick * showTab () 之类的东 S ,对不对？ 




通过编程方式指定事件处理程序也是一种实现内容与 
行为分离的方法。 

要尽能保 ilHJavaScript 与 XHTML 分离。对 J 
XHTML 和 CSS 也是 如此: 要保 ill: 它们分离。 


tlierejore no 。 

Dumb Questions 

: 再问一次，什么时候会调用 R : 浏览器怎么知道要调用哪个 R : 那么在哪里对这个属性賦值 
window.onload? 函数呢？ 呢？ 



Age 

I 实际上 window . onload 是一个: 浏览 ■器 会调用你指定 

1 M 牛。 一旦 XHTML 页面由浏 It 器读入，给 w i n d o w 对象 o n 1 o ad 4性的 


而且该 XHTML 中？ I 用的所有文件都已；数，设置这个属性与设置任 


经加钱，就会犮生 或触 发这个 f 件， 

i^) J 这么说， window.onload 触 
发时.浏览器会运行这个事件的車件 
处理程序 . 对吗？ 


何其他 J a v a S c r i p 丨株性是一样 
的： 要用等号来设置。只是要 

确保去掉函 R 名后面的 括号： 
window.onload = initPage; 


^ :完全正确. 


^: 洌免器一旦遇到不在任何函 

ft 中的代码.犹会立即运行这个代码„ 
所以.只需把 window.onloail 试值语句 
放在 JavaScript 晨前面，要在所有 Jjtt 
之卟，这个賦值就会在用户与页面交 
互之前发生„ 

接下来.浏見器会触发 onload , 并运 
行你栺定的 Aft , 你可以利叼这个机 
会设 iVVeb 页面的其他事件„ 
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JavaScript^ 

你沿耍初始化 Marc)^ 瑜珈 ! Kifti 。 以知移到左边的各个阁像或 l.iiii 的 
标签既时，它们都要 显示相 应课程的相关信息。另外，点击-个标签 
沉就会选抒 所点击的课 fi'i 。召看能 不能使 H1 以 | 、 ‘ 磁 WA 纽 、 V:initPage () 闲 
数，并为所引用的其他函数违立占位闲数。对现在来说，这些占位函 
数只迠诂示提示抿。 
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磁贴荅案 




利用第16页1:的步骤以及 JavaScript 中嘗件如何工作的有关知识,能不能 
歌新创建 Marcy 页面的初始化代码? 




function initPage() ： Q3 


光不用大荇 * o.ii 代砝。我们将 ，華 5 旁 
和箒6脅{薄 鉑付论 M < i 这咎 fetlUment ^ ii 

^ v 


神坏钍任备个 
< im $> xi , 
4分 l_J 妁； 

5M4 


var images = document 


_^^_ 

.getElementByld ( M schedulePane") .getElementsByTagName( M img M ); 


、 _ ， 

得 f») •去稱 <imj> W 
个 H 

5 •子一个祛•子 •• •…^ 
…… 用户将 n 铥祎出 


•4 $记这螯 结來之 


Kimages. length; j-M^j| 


iT 


var 


currentlmage = images [i]; L 




currentlmage .onmouseout 


=[showHint^ ; | 

/hideHint 一 ""Tj 


记 佴这个 科谂之 麯咢喝•: 

2些屢4含/5用户埒祆杉移纠其个 
:? <1祷略 gi 武杉.杳否丄•的盔芏 





记 (i , Z ttc a ^ 


function showHintO 


GJ 


alert( 




in 


showHint() 


£ C & 


妒. c f f 笋沪么奋各敎柒避 

^JflvaScKpt?? 




function hideHint() 


[alert( " f 
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JavaScript 亊件 



运行测试 


创建 schedule.js ， 增加上一页所示的函数 ^> 另外，不要忘记为 window.onload 事件指定 
initPage() 函数，然后在 Web 浏览器中测试这个 页面。 

把以 标移到-个^签洱上。应该能看到对应 showHint (> 的-个提示，然后会显示对佐 
hideHintO 的提示。 洱尝 试点击 一个奸 、签财。能得■到一个 showTab() 提，六吗？点击左边的一 
个图像呢?目前什么也不会发生《> 




货办… - 

你舊欢这个用户界面呷?还能仵哪里做些修改? 
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让人困惑的 Web 页面 


_ 




如 果一个 Web 页面连 g 都感到困惑，那几乎肯定也会让 
你的用户困惑。 ~ 

设计并实现一个 M 站时，你知道这个网站要做什么。如 
果网站 il : 你都感到闲惑,那么用户——比你更槽，他们 
技至没有你掌捉的佶息一很4能会更困惑。 

即使并不是由你完全控制网站的设计，比如说 Marcy 的瑜 
珈页面,也应该尽可能 it 网站清楚明如果这意味着 
耑要把阁像转换为按钮，以避免… 户尤休 止地点右这些 
ra 像，那就放手去做! 


麻 i •士你糾 I 户喜％ 
-个的也 ⑽ n • 



传是 难道达钬不让人®惑？吗？ 
如*©僬是玎 * 击的.邡钬布：? 
* 种导航 方式： 标签 j § 和©佴。 



有时必须在“可以”和“更好”之间作出 
选择。 


如果并非完全由你来控制•个网站的设1卜， 
忭忭要坫 f 现 fiH) 作出最作决策。村 r 
Marcy 的网站,她就喜欢这种有标签页和 W 
像的设II*。 

闲此，你的任务就迠裉椐现柯的 基础柬 作敁 
佳决策。在这种情况下，这意味着存在两种 
导炕形式来避 免用户 困惑。否_，就会把左 
边小可点山的 m 像 误以为 坫按机 。 



m 
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拕左迖的惙像改为玎点击 

要把 Marcy 财向左边的图像改为«丁点击的图像，这相当 
容易。实际上,我们所要做的只是刪除一些代码。 



function initPageO { 
var images = 

document .getElementById( ,, schedulePane ,1 ) ; 

for (var i=0; i<images.length; i 十 +) { 

var currentlmage = images[i]; 
currentimage.onmouseover = showHint; 

cur rent Image, onmouseout = hideHint; 巧点壬 • •• • • • 辽 4 望鰣眘 


schedule.js 



试谈巷……现在备个®薄部 
6 iH <霹用 show 了 a6() 0 



妗的 Web 页 w 
方佘 itA 阏惑 


一个好的 Web 页面要尽可能直 
观。如果一个元素看上去像个按 
钮，那就把它做成一个按钮。如果网站的某 
一部分让你 （Web 程序员）都感到困惑，那 
么对用户来说很可能会更困惑。 
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XHTML 是内容和结构 


使用 XHTML 的沟容和结构 

用户把鼠标移到-个标签洱或图像匕时会调用 showHintO。 但是如何知道 
鼠紜 在哪个标签! n' 或阁像I:呢？力此，需要砰来件肴 Marcy 的 XHTML。 


XHTML for page head and body ... 

<div id= w schedulePane"> 

<img id=”logo" alt=”logo" src= M images/logo.png M /> 备个 ® 策部右一八 / 

<div id="navigation"> # t ^fl • 

<img src= M imaaes/beainnersBtn.pnq M alt= t, Beqinners Yoga" , . 

title=”beginners" ?^ss="nav" /> 一国 — 1 """\ \ 

- - \ 

<img src= H imaqes/intermediateBtn.pnq M alt=I"nt ermediate Yoga^^y 

title="intermediate" cTass= w nav f, /> *"- - ^ / 

<img src= M images/adv^ncedBtn.pnq M alt= M Advanced Yoga" 
title=”advanced” class="nav"/> "^ 


</div> 

杉釜资 ff 迻 用同样 

<div id="tabs”> 广 的 title 尿 * ft« 

<img src= f, images/welcomeTabActive.png H title= ,, welcome M ^lass= ,f tab M /> 

<img src="images/beginnersTabInactive.prig” title=”beginners" class 二 ’ 'tab" /> 
<img src= M images/intermediateTabInactive.png // 

title=”intermediate’’ class="tab" /> 

<img s 】 

</div> 


"images/adva ^cedTablnactiive.png" title=.’advanced" class="tab” /> 



毎个 XHTML 无素在 JavaScript 代码中都玎认作为一 
个对象钫问 


你一直在使用 ge t Element Byld < ) i 方 M Marcy 的 X HTM L [J( | 酎屮的阁 
像。这样是可行的,因为 XHTML 中的各个元素都由浏览器表示为一 
个对象， h ] ■以在 JavaScript 中加以处押.》 

电帏的是，元桌的所有域性都存储为表示该元桌的 JavaScript 对象的 
W 性。由 TMarcy 的阁像有标题，所以吋以使用这呰标题来确定选择 
广哪个阉像或标签豇，并显示适 "1 的提示。 
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(parpen your pencil 

用户把 


用户把鼠标移到一个阁像I:时， shovvHimO 应1显示关千各课程的一个简短的 
提示消息。+过 U 冇选择了欢迎标签豇时才应敁示这个提示。如采选择 TJit- 
个课程，则耍馈用提示。你的任务垃完成以下 showHint() 的代码。 


var welcomePaneShowing 


逆安扳的 我们 才 4 望 S 5•• 祛矛。 


function showHint() { 

-a-iort(-4n- & howHint0"+ f — 

if (! .) I 

return; 

} 

switch (this..) { 

case •• ••: 

var hintText = ''Just getting started? Come join us!"; 
break; 

case ，• ”： 

var = ''Take your flexibility to the next level In¬ 

break; 

case M: 

var hintText = 

"Perfectly join your body and mind with these intensive workouts."; 


var 


'Click a tab to display the course schedule for the class"; 


var contentPane = 

.innerHTML = 、、 <h3> # 


'content"}; 

• + w </h3>"; 
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爯为 hideHintO 增加代码 


•珪完成 showHint {)， hideHintO 的代码就很简申- _ f ，只需得到内容面 
板，将提示文本设置为默认文本。 



更新 schedule.js 。 增加一个 welcomePaneShowing 变里，并更新 showHint () 和 
hideHint() 函数，然后尝试运行《 
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Web 是可视化的 


标签页：一种视觉（©形化）印象 


Marcy 很喜欢瑜珈页 (fii t . 标签页的外观。由干已经有大镊很好的工具 
乜玎以用来创违椋签豇，所以我 fHH 耑要一个简申的阁形化小技巧。 

在这个瑜珈贸而上，有•个深绿色的 K 内容而板。所以这种颔色实咏 
h 躭成为“活动”色。 Welcome 标签豉开始时就是这种倾色,其他标 
签页则是一种较浅的颜色，即“不活动”色。 


Welconitft?- Jf- 


…… 



beginners 


intermediate 


advanced 


CUck a tab to display the < 


ii 幼疙耷 i 内容 if 扳的飫疙 "■致 



schedule for the selected class 


要激活一令标签页， t 要将淡标签页的背景 
改为“活动”色 

要激活另•个标签页，所要做的就坫把它改为活动色。然后把 
原来的话动你签豇改为不活动色，使之作为小活动的铋签页。 

所以假设对应甸个杯签釭和两个 m 片： 一个坫杆活动彳 f 妖的标 
签豇，另一个是有不活动背 t 的标 签豇。 

begmner* 丨 、戈劫鈑本 

不活动 活动 

我们已技 AT •个 showTab (> 闲数。所以这个闲数 
拎先要做的就迠改变这苎可点击标签豇的标签苡 
图像。 

\ t 

I 、 

不活动 活动 
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使用一个 for ……循环处理所有®係 

前面已经在 showHint 0中使用了围像对象的 title 属性来改变提示文本。 作 
showTab () 中也沿要做类似的 工作： 确定哪个杯签奴蛙沾•动的，并把该标签豇 
改为相应的活动阁像。所有炖他标签豇则设宵为小 活动阁 像。 

function showTabO { 
alert( M in showTab() M )； 
var selectedTab = this.title; 


var images = document .getElement ByldCtabs 1 ') • get:Element sByTagName("img">; 
for (var i=0; i<images.length; i++> { 

var currentlmage = images[i]; 
if (cur rent Image, title *== selectedTab) { 

cur rent Image, src 二 "images"/ + cur rent Image, title + ’’Top.png"; 

} else { 

current Image, src 二 ’’images"/ + cur rentlmage.title + "Down.png"; 

) 



这个事件处理程序中包含大量与表示相关的详 
细信息_ 

showTabO 现在会直接处理图像名，而 R 它实际 
t 在动态地构诖这些图像名!所以 showTabO 不 
仅把行为和灰示 mm 混在广一起，而乱还依 
赖 r- X HTML 以 Iftf 的内界——各 m 像的栎题一 
才能明确使用什么表示(图 像）。 

这 1 H 确实存在一个大 H 题。你会怎样做來解决这 
个问题呢? 翻开下一页之前， 先考虑 - F 如何实 
现内容、表示和行为的分离。 
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css 是表示 


CSS 类 I 兵鍵（爯一次) 


Marcy 很*欢瑜珈豇 Ifti h . 标签 飪的外 观。由干已经有大韨很奸的工具 
包可以用来创建栎签！ K ， 所以我们只需要一个简 申的阁 形化小技巧。 

对 T •毎个标签页有两种可能的 状态： 活动状态（与内容面板一致的深 
色）和不活动状态（较浅的颜色，表示未选 屮）。 所以可以分別为每 
个栋签豇 建立 两个 CSS 类： 一个表示活动，另一个表示不活动。 


打开应用 css / 目录中的 yoga . css ， 增加以下代码。 



#tabs a#welcome.inactive - - ---- 

background! ur 1('../images/welc&fla^Tablnactive.png') no-repeat; 

#tabs a#beginners.active { 

background ur 1 ( 1 ../images/beginnersTabActive.png 1 ) no-repeat; 


莕个杉爸 
资中有 s 
个炎。 


120 第 3 章 


yoga .css 


Download at http://www.pin5i.com/ 






JavaScript 事件 


嗯 


侄是标签页不 I < a >! 


你注意到 CSS 指定哪个元桌的样式吗? # tab 指示-个 id 为 “ tab ” 的 
< div >。 这申.没有问题。但是接下来， CSS 指出要对 < a > 标记指定样式， 
Jt-id 分別为 “ welcome ” ， ** beginners " 等等。 这 1 ^Marcy 的 XHTML 页 
向不-•致。 

似这个 P : 大 M 题……我们可以把 XHTML 妊面屮的所有阁像改为 < a > 标 
记,在表示 M 之外再分离出一个内容崧。 


«个杉 

扣由一个 

<a>if 


XHTML for page head, body, and schedulePane <div> 

无砉仍钱夯一个 titf ， 和，个“ 

ome w t 


现4 ?以荠斤•挪昼 衫爸否 4 
i 力的.#哒4 不:去 冰的。 


<div id = tabs > 

4k ： - 

, <a id="welcome” title="welcome M class="active" iref= M # M >Welcome</a> 

^ <a id= M beginner8 M title="beginners •’ class=’’inactive" href="#”>Begirmers</a> 
<a id="intermediate” title= n intermediate" class=”inactive” 
href="#">Intermediate</a> 

<a id- M advanced" title="advanced” class=”inactive” hre£= M # M >Advanced</a> 


tmrg "- b , ru-- >l itnQqGG/woloomoTcibAGt ivoiprx^ 11 —*t itrii 
hmg — i raaqoo/-)»c>%-i-of>of GTc>bI n-^o t . P^^ 11 """* 

rTrtg9 r c <ir,A 1 i , ■/ -i r n>Gd , iQtg f Pab — vu .ptiy u 

title» u intermgdiQte tl ul^s-'^aL/ 11 - /> 




"tHtJ* 


r o(_ uiimeTs 1 


^tab^ 


3rc- M jjiiayyb/ciLivai r ctfd Tctt)TIl ciLLive: p T rg M -titlc Mll advaneed M olass~ M tab 
dlV > 去 jf XHTML 中® (象的 4 德? 1 用 



t^reiore np 

Dumb Question 





classes.html 


问 


为什么 href 设罝为 “#” ？ 


^ : # 表示引用当前狂„我们不希望标签页把闹户带 
到別的页面，不过后面会编写一些代码使得点击一个标签 
页时会显示所选课《的课裎表。 

r ^) :既然不把用户带到别的地方，为什么要使用 
< a > 元素 呢？ 


^ : 因为标签页实际上都是链接.它们会链接到各个 
课秸 的课移夂，尽管这里采用了一种不太传统的方式.所 
以对于链接来说最迻合的 XHTML 元素就是 < a >, 

另一方面，在 Web 上完成一项工作通常至少有两到三祌方 
法 .， 可以使用 < span > 元素、 < div > 甚至图 <象映射，这完全 
取决于你.只要能够将 f 件处 理乜序 关联到元素，这些方 
法都是可以的《 
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javascript 是行为 


迖也会碰坏我们的 JavaScript , 1 不是? 


我 ffl 有广一个很 漂亮、 很简洁的 XHTML 页面，还有•哇 CSS 可以 貞止控 
制 [ U'lM 的衣示。但 足:现 在所有依赖 r -< img > 7t 尜的 JavaScript 郎将尤法作。 
不过这也没有关系，因为即使从前那唑代码能 r 作，也是将图像（表示） 
与行为混杂 在一起 ……这是一个严承的问题。 

T 向来调幣我们的_本，将瑜珈页面的所有表示与行为分离。 


window.onload = initPage; 

var welcomePaneShowing = true; {•)ta6sr <J«v >. 吞达代公理 

function initPageO { 

var tabs ® 

document .getElMMiitByldC'tabs"). g«tElem«ntsByTagName (，•&"); 
for (var i=0; Ktaba. length; !+-♦■)( 
var currentTab = t&bs 【 i 】； 


ii f # 沒有太大 4 [利 耷 

currentTab.onmouseover * showHint; J 涿光杉蒼否巧 g) f 拳的 _ 样 

currentTab. onxnouseout = hideHint; 搴件 和箏件处理沒 4 #沒奇 

currentTab. onclick = showTab; 、変化。 



f . 雾并。采茗-个 於的代 
* oj. IT A ^ 


var images = 

document. getElementById( M schedulePane f, ) .getElementsByTagName( ,t img M ); 
for (var i=0; i<images.length; i++} { 

var currentlmage = images[i]; 


currentlmage.onmouseover = 
currentImage.onmouseout = hideHint; 
currentImage.onclick = showTab; 


showHint; J 
lideHint; > 
Tab; J 




function showHint() { 

// showHintO stays the same 

} 

function hideHintO { 

II hideHintO stays the same 
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function showTabO { 

var selectedTab = this.title; 




var tabs = document.getElementById( f, tabs M ).getElementsByTagName( T, a M ); 

for (var i=0; i<tabs.length; i++) { ' — 1 - - 

var currentTab = tabs 【 i 】； 
if (currentTab.title == selectedTab) 

currentTab.className = active; ^ ^ # 

else { z 



currentTab.className 


•inactive* 




运行测试 



schedulers 


前面已经做了很多修改。要更新 classes . html . yoga . css 和 schedule . js 。 接下来看看这些 
标签页能不能正常工作……试着点击各个标签页。 


I 忐一个杉荃贡 



法功的 . 

\Z 


beginners 


intermediate 


advanced 



…… 不 苒他杉 釜否在 
変 # 不 : i 麯。 
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分离层 




越早将内容与表示和行为分离，分离就越容易。 

对 f M arcy 的网站，我们歼始时并没有考虑到内容或表 
示， H 有3行为 (JavaScript) 屮增加 f 几个函数时才发 
现问题。如果能从一开始就规划好,保证代码中不直接 
涉及图像,而由 CSS 处理所有表示部分，对 JavaScript 的 
柊改就能更少一些。 


鵪 




另外 • 叩使到后期才发现问题，还是有必要做些工作将 
内容、表示和行为真正分离，通常这比不做任何工作更 
合适。你的府用会变得更捽，与 A 完成分离所做的工作 
相比，这绝对是值得的。 


1^) : 那么是不是 XHTML 中根本 
不能有图像？实际上标签页就使用了 
图像.对不对？需要把 < img > 元素从 
XHTML 中取出来吗？ 

V : 这只是一方面。史重要的是. 

我们使用了 CSS 来控制按钮是否是活 
动的。一个按切从活动状态变为不活 
动状态时的卟現属于表示部分，所以 
放在 CSS 中. 

XHTML 中完全可以有 a 涞，只是要 
确保 一点： 如策这些 a 像关联到行为， 
就会把 css 和代码;昆杂在一起，此时应 
当把图像的这痊细节从 XHTML 中取出， 

R : 我不太明白这里的 

CSS。“#tabs a # advanced . inactive ” 
是什么意思？ 



^ : #号指示一个 id u 所以 # tabs 表 
示 “ id 为 ‘ tabs ’ 的莱个元素”。在 
XHTML 中，这就是 id 为 “ tabs ” 的 

< div> a 

接下来， a#advanced 表示“对 

于一个 id 为 advanced 的 
< a > 元 素”， 所以这就是一个 
id 为 “ advanced ” 的 < a > 元素 • 它嵌 
套在一个 id 为 “ tabs ” 的 < div > 中。 
最后，“”指示一个类。所以 
a # advanced . inact:ive 表 
示 （id 为 “ tabs ” 的 < div > 之 
下） id 为 “ advanced ” 而且类名 
为 “ inactive ” 的 < a > 元素。真是很复 
杂，所以如果你对这个 CSS 还不是很 
明白. 可以找一本 《Head First HTML 
with CSS & XHTML 》 帮你 W 决疑睢 B 


l ®) : 左边的所有按钮都是图像. 
而所有标签页都是 < a > 元素.这不是 
有些奇怪吗？为什么不对按钮也使用 
< a > 元素呢？ 

^ : 这个问題问坏好，我们后面 
还会讨论这个问題，不过只要你 •注意 
到啷些地方不对幼.就可以自已先记下 
来.这些方面往往值佴更详细地分析。 

1^) : 我点击左边的一个按钮时, 

标签页也改变，这样对吗？ 

S 你认为呢？选择 “ advanced ” 
桉纽时，你认为 “ advanced ” 标签页 
应当变成活动的，是吗？ 
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不过 showTab () 还没有完成。点击 
一个砧 签豇时 必须 W . 示所选深程的课程表。假设深程表是一 
个 HTML 描述和-个表格， 其中显 示了 -周七天中什么时间 
会冇所选的这个课稅。 h 〖能还要冇一个 “ Enroll ” (^ id ) 
按钮。 

怎样作 flU 悔个课程的 详细信 息和课程衣？作—个 HTML 文件中，还是存 filf 
作 JavaScript 屮？你选择哪一种格犬，为什么选抒这种格火？ 


^Jharpen your pencil 


我们已 经做 r 很多工作， 


怎样把 I :内对 iftife 袢换为所选课稅的课柷衣和 


你的解决方案 能够: 

□ 将豇曲内容弓炖表示分离？ 

□ 将页而内容与其行为分离? 

□ 将! n '_ Ti •为与其表示分离? 


/ jax 於梂心鉍喪 $互 。 
你的菸镝要熊矽与勝旁 
粽鱗移序、页 W 本身的 
弗素甚至其他夯3^ 
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Ajax 可以请求 XHTML 页面 


嗶，笫一令闷超很容愿。 如粟澤 IS 本和 
甩述是 HTML , 应咨拕它们存61为一令 

HTML 页由。 



Jill： 你的意思是 XHTML , 对吗? 

Joe : 对，没错 • 

Frank： 作为一个完整的页面?这样可不太好……我们不 
希望为毎个课程 t 新创逮所有标签页取I相关的内容，不 
是吗? 

Joe : 哦，那存储为一个 XHTML 片段怎么怍？比如说， 
只坫表示具体课柷表和课程描述的疋桌和 文本。 

川I :紂，闪为我们根本不希爭所有这些内容出观 fr: 
JavaScript 中。如果使用 XHTML, 就可以像匕页而中一 
样使用同样的 CSS 样式。 


Frank： 但是怎么加栽那鵠……叫什么来普? XHTML 片 
段？ 


Joe： 说对了 • 

Frank： 那4/,那么怎么加栽呢？ 

Joe： 足这样的，慽签! K 邯足 <a> 元紊。 也许 "f 以把片段 
放在 href 属性屮 而不是 那些#符号? 

Frank： 仉是这会转换整个页面。这样 +好。 另外，肴上 

去有点慢…… 

Jill ： 伙计们，使用一个请求对象怎么样? 

Joe： 什么意思？ 

Jill ： 能不能使 HI —个沾求对象得到 XHTML 片段，然后只 
足将内咨向板的 inncrHTML 设筲为返 M 的页面？ 

Frank： 能这样做吗? 

Jill ： 怎么不能?我们不再请求一个服务器端程序，而只 
需请求我 ff 1想要的 XHTML 片段 9 

Joe： 而且可以异步地请求,这样就+用等待页面刷新 
T! 
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var request = createRequest(); 
if (request^^null) { 

alert(Unable to create request); 


return; 


request • onreadystatechange = si 
request .open("GET", selectedTab 
request, send(null); 


showSchedule; 


，ab + ".html", true); 

f 将 14 段命名 ihbeiinnei tn 




ad^Ancei. htmt 。 

function showSchedule () { 

if (request. readyState == 4) { 
if (request.status == 200) { 

document • getElementByld (content). innerHTML 
request. responseText; 


f 4 中 的 XHTMt SJ 以 ULusponseText 
中 # 9 以僅用板的 
" 打 HTML. 采 • 子 (i 个 


仍然采用以往的方法构建代码，使用 utils .j s 中的 createRequest () 函数, 
另外使用-个 N 调闲数在内容面板屮示结果。我们忠要的代矾如下。 


function showTabO { 

var selectedTab = this.title; 


// set each tab f s CSS class 


ii 4 箾爰鵠？的舴分 

$howTfl6() & So 


Zh 

I 

schedulers 


使用清求对象从服务器荻取 
课程洋细信息 

服务器不 H 紂 Marcy 的! K 谢做任 H 处理，不过我们仍然 4 以使用-个请求对 
象来获取梅个课柷的 XHTML 片段。这是对服务器的一个请求，但是只请求- 
个 lUrfnifii 不坫一个抑 ir :。 小过，详细 f , 说.与你之前 0 到的足邻的。 


•轉 




} 


对 schedule.js 做 h 述修改后，尝试访问改进后的 
WehUiifii 。 一切正常叫？还有没有什么志要修改的？ 


你现在的位置 ► 127 


Download at http://www.pin5i.com/ 


的 $i 

<sfev 

J «- 

4代 
沒達 
叇 6 -J 

器求 

«的 
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异步性的同步 


两个&数修改 Web 页 i 中相罔的部分 
时要当心 

这51釘-个 bug ! 课程表 h 〖以正常记示，但是鼠似移到另一个标 签豇或 按 
钮 ram I :时会隐藏课程表，件把内容向板转换4提示文本。这 r ; •起来有 
些 ih 人不叫所以…… 


51 W 璆矽地从 XHTML /4 段扣 

^ ^ Of. vgi fi 



b 壬一个抬芘我钐爸费 芍以乐 p 
^1^： 获 S 4 f .)0 N 2 表.拉砭存 

内審$板中。 


了来龙 

乜含否 I :的.古龙•这 y | 表梦痴为 
个接•子。达 爰不 吋的， 



确保己经得到各个课程的 XHTML 片段。 

各个课程的 XHTML 片段乜允在从 Head First LabsM 站下 
我的示例中。要确保它们分別命名为 beginner . html 、 
intermediate . html 和 advanced . html 。 这々片段 
应 ’*1 主! K lfiiclasses.html 住 | h ]-- 个 H ，点下。 
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your pencil 

赃来完成 


现在来完成 Marcy 的贞向。需要修改 JavaScript , 使得只有当欢迎标签员处于活动 
状态时才会显示提示。如果选择 f 某个课程，就不应显示提示。可以对以下的代 
码做记号、划掉或增加一些代码来完成 schedule . js 。 为了对你有所帮助，我们只 
显示 了脚本 中需要修改或补允的部分，以及与这些修改相关的部分。祝你好运！ 


var welcomePaneShowing = true; 


function showHintO { 

if (!welcomePaneShowing) { 
return; 

} 

// code to show hints based on which tab is selected 


function showTab() { 

var selectedTab = this.title; 

var tabs = document.getElementByldrtabs")("a. 
for (var i=0; i<tabs.length; i++) { 

var currentTab = tabs[i]; 
if (currentTab.title == 'selectedTab 1 ) { 
currentTab.className = •active'; 

} else { 

currentTab. className = • inactive ’； 

) 

} 

var request = createRequestO; 
if (request == null) { 

alert( w Unable to create request ”； 
return; 

} 

request^onreadystatechange = showSchedule; 
request.open( M GET ,, / selectedTab + •html, true); 
request.send(null); 
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完成 showTab (> 


c^harpen your pencil 
、‘ Solution 


你的任务足完成这个代码，从而在标签豇中所选课程而 
不是 W . 示提示。只有当活 动你签 豇是 Welcome ^ 签豇时木敁 
示 提示。 


var welcomePaneShowinq = true; 

function showHint() { 

if (IwelcomePaneShowing) 
return; 




在如中6茲 <5的欢逆®板的栓 f 
vj . p . t ⑽正祕役 ■ 这个变， 


// code to show hints based on which tab is selected 


(il 基扣 t « 栌代砝。笏 光. f f f ^ 

function showTabO { 6(7 it ^ -8. S' i^Jelcome^^ ^ „ 

var selectedTab = this.title; 


if (selectedTab ** ^ Welcome *) { 
welcomeFaneShowiiig s true : 
documeht . get £ leweiit ^ yld ( coiite » it).ihiierffTML 
^ "< h 5 >Cliek a tab to display the course schedule for the class </ h ?>*; 


iif 

闷蛀 …… \ e i „ i 

fiaav.Sct.pt^ > els ” 

溪萍 3 象子 • ， welcomeFaneShowiiig 8 false ; 

蓽 5 # 扣 

介绍 00 M 的你 } 

金 3 搞一神兹 

免这个 | 句 &<^// everything else stayed the same! 
75 \i c i 


如菜基.則在 J welcome?aneShoMtn^ ■§ 

如蓽一电.芍以 较外二 

欢迕洎&欉簾淇植表…… 

……5 ?!). 玫 S 香叛丄 • 
将出现一个这沒表 . 不 


如 I 逢柃3分仞苒他杉苍否 • 

welcome? 

一来由号 s ho » Hi « t () 中有 4 祛句 
不金$孑 仔何炖 •子％ 


ii 样 


■E 不: •聲窈 f 5 $ . 子赛个这 
伐的 a 6! 


there,are no 

Dumb Questions 

R : 如果我没有想到选择 Welcome 标签页时要把内容面板改回为欢迎 

消息，那该怎么办？ 

^ : 没关系。不过，一定要把这个代码增加到你的 schedule . js *. 将来 
要想避免出现这蛘的遣漏，一种方法就是一定要测试你的代码，加栽谕伽 
课程页面.在页面上点去和移动鼠标……有没有什么看上去很滑蛸？如果 
有，就要做必要的修改来解决那个问題， 
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JavaScript 事件 



运行测试 


确保你已经有了 XHTML 片段、更新后的 CSS、 简洁的 XHTML 课程页面（不包含表 示！） 
以及完整的 schedule.js。 加载 Marcy 的 Web 页面，自己试一试。 



_ V09* lor PnwMMMtk 

• 轟 at co^raoiKt ，，句 “ f'OI/c-AtMi 


i 忐一个衫•爸否或拣往含选柃 
ii 咨的表和介绍 …… 


1 不 4 … 




Cttck ■ tab to dtapuy tb» cdotk adiadsk for tbe 

_Vo^*torl 

%- ^ A •nm ,htmm hcMf'^vcaai co^.ooo«t 




lor Pio9r4<iuw»% 




yf 义 


Extreme 

several lowclft MM 


Yoga 


pavaf cnucbes 


r*fl 'o* tmm r>««d>vilUfei «bm 


tfiBaarm 
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客户总是有新想法 



我还 笮更多 不罔綸 珈深的 © ft 。 如菜拕鼠 
• 标稃 到迕达的某个 ©fti: 时扭谁陡改変.达 

样是不是 更箱？ 


Marcy 希望 S 用户拕鼠标移到左达 
的®僬上时©係能改变 


的法功陡灸。 
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熏要改变脚本中的©像时， 
S 当考虑“改变 CSS 类” 


JavaScript 事件 


这里也要特別强调表示4行为分离。在柊改任 H 代码之前，要这样来考 
虑：“这种情况下我是不是要把行为（代 码） 与表示（如 图像） 混在一 
起？” 

如果是，那就应该完成一些 m 构工作。 ra 像按钮确实很像标签页，但它 
们矜上去像按钮而不是标签贞。所以下而为两个按钮状态增加一些新的 
CSS 类： 正常按钮和活动按钮。 



♦navigation a { 

display: block; float: left; 
height: 0; margin: 0 0 lOpx 0; 
overflow: hidden; padding: 140px 000; 




width: 155px; z-index: 200; 


) 


软认岵， 接迮(吏用 
个®体…… 


♦ navigation a#beginners { 八 / 

background: url('../images/beginnersBtn.png , ) no-repeat; • 去 # •• 逢 # 杖 & 

} 一^—的，它 f 奎用系一个® 飧。 

tnavigation atbeqinners.active { 

background: url( f ../images/beginnersBtnActive.png 1 ) no-repeat; 

) 

tnavigation a#intermediate { 

background: url( , ../images/intermediateBtn.png , ) no-repeat; 

} 

#navigation a#intermediate.active { 

background: url( f ../images/intermediateBtnActive.png*) no-repeat; 

} 

•navigation atadvanced { 

background: ur 1 ( 1 . • /images/advancedBtn,png') no-repeat; 

} 

tnavigation atadvanced.active { 

background: url(•../images/advancedBtnActive.png') no-repeat; 



yoga.css 


奂 祅 蒼历的榷在类 一缉 ， 

,. i 墊笱以故在 ess 中的 分舍 
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使用适当的元素 

XHTML 中的键捿表示为 
< a > 无素 

在这里还可以对 XHTML 做一些改进。目前，图像郎表示为 
< img > 标记，但是实际上它们的功能就相当于链接 按钮： 可以点 
击某个图像来得到一个课程表。 

下面把各个按钮改为 < a >， 这样能吏好地表示能点击这个元素到达 
一个不同的目标，在这里目标就是一个课程表和课程介绍。 



接保 <吏用正 


<a id="bttginnars M title="bttgirmers" hr_f="#">B#gizm 籲 1 ：霧 </&> 
<a id="int#rm_diat •” titl#=’’int_rmodiat_" hrefs’t’SInterme ， 
<a id= M advanc«d M title—'*advanced" href= H # M >Advanced</a> 


ite</a> 


tiierejare no 

Dumb Questi 


classes.html 


1^) : 对于标签页，我们有一个 inactive 类和 
一个 active 类。但是对于按钮， XHTML 中这些按 
钮并没有类 （ class 属性），另外 CSS 中只有包 
含活动图像的 active 类，为什么这些按钮没有一 
个 inactive CSS 类呢？ 


9ns 

^: 问得好.对于标签页，有两个不同的状 
态：活动 （处于 前台）和不活动（处于后 台）， 
不过，按钮实际上有一个正常状态（正常 显示） 
和活动状态（按鈕高亮1 示）， 所以一般情况下 
只是一个按钮（而没有类），然后在鼠标移入该 
桉钮时再为按纽指定 active 类，这样做会史合遠， 
不过，统一性总不是坏事，所以如果你坚持认为 
那样更合适.也可以使用 inactive 和 active 类 
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还 f 要一个亟数显示活动桉钰和隐 
藏桉钮 


JavaScript 事件 


对 schedulers 做任何修改之前，先来增加两个我们需要的函数。首 
先，黹要 * tbuttonOv er () 函数显示一个按钮的活动图像。为此 
:改变一个 CSS 炎。 


function buttonOver() { 

this.ciassName = "active"; 


冢杉•轉 f ,) 一个抬纽上进. 


用户鼠标移出按钮区域时 " T 以做完全相反的 r . 作， n 盅把它改回 
为默认状态，也就足没有任何 css 类。 

functi'on buttonOutO { 贫到软认狄态 0 

this.ciassName = "•’； 

) 


抝飴化页面时，熏要持定新的擧件处 
理程序 


在 Java—Script 中, 
宂素彔矛为—个 
o 迗个对象 
对子在所泰矛宂 
素上矣生的毎个 
事件鞒有—个展 


现在需要为适当的事件指定新的函数， 
b u 11 o n 0 v e r 0应、指定到按钮的 onmouseo ver 私汁 • ， 
buttonOutO /* 5 /: 当指定到按钮的 onmouseout 事件 o 


还 " J * 以史新代码，使用表示按钮的新的 < a > 元素而不 
是原来的<：11^>711桌。 


function initPageO { 

// code to deal with tabs 

^ - ^ var buttons = 

& 0 document. getElementById( M navigation M ) .getElementsByTagName( ,, a M ); 

壬處名 ^ for (var i=0; _i< buttons. length; i+ + > { 

~^ar^currentBtn = buttons[i]; 

敦通故名 currentBtnT^nmouseover = showHint; 

^ 6iAttows currentBtn.onmouseout = hideHint; 
currentBtn.onclick = showTab; 



currentBtn.onmouseover = buttonOver; 
currentBtn.onmouseout = buttonOut; 



I 妒的辜件让碟 4 里埤。 
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运行测试 


@11行测试（终结篇)- 

—切都应该能正常工作了！完成以上对 XHTML、CSS 和 JavaScript 所做的修改，让 
Marcy 感受一下这个一流的交互式课程表页面。 



豉本. $矛一个 ㈣ (象。 
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O 


别 并么怕 7 銥论……你试过达令页® 

唣？用值碓尖是耷 ？. 传是鼠标桴到桉纽上时 
邡些笮用的熳示会怎么祥嗓？它们邡不见 ？ f 



^y^% l i^§c^onmouseover^V 
cmmou^eouf 事件的按矛会有什么 
实化？ 

你佘怎祥你弗碲保 Warcy 的者户 
跃得到很聆的矣互式按^ 

到有痄的桡矛？ __ 


扣笫你 B 经有3恕法，翻犴第 
4章，翁著妒何把你的事忤处琪 
水年（确确宍宍）按雋到—个新 
於焐麥。 
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4 多个擧仵处理程序 


命 

两人成伴+ 



一个事件处理程序往往还不够。 

有时一个事件需要调用多个件处押程序。也 iT •你要做一些特定事件的动作， 
另外还有一些通用代码，把所釘这些内容都塞到-个 事什处 理函数屮是不合适 
的。或 iT •你力图创逑 简洁，可重用的代码， 而 ft 同一个事件 要触发 两个不同的功 
能， 很幸运地，你可以使用一些 DOM Level 2方法 为单个事件指 定多个 事汁处 理 
函数。 
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事件就是属性 


一个擧件 H 能布一个攀仵处理程 
序乌之兵联（或者看上去如此） 

Marcy 的页面有一个 M 题。我 ff j 为图像按钮的 onmouseoveH /4 性 
指定了如下两个事件处理程序。 

function initPageO { 

// code to deal with tabs 


var buttons = 

document .getElementById( ,, navigation M ) .getElementsByTagName( M a M )； 
for (var i=0; i<buttons.length; i++) { 
var currentBtn = buttons[i 】； ^ 

currentBtn.onmouseover = showHint; 

currentBtn.onmouseout = hideHint; 
currentBtn.onclick = showTab; 

currentBtn.onmouseover = buttonOver; 

currentBtn.onmouseout = buttonOut; 


过这爹碎它彝愛了 ^ ^ . 


以 A buttonOveri )4t Jf Sb Sei 


只会迗行所持定的 最后一个 事件处理程序 

为 N —个事 汁指 定两个事件处理程序时，只有所指定的最后一个事 
件处理程序得以运行。所以仵 Marcy 的页面上，当鼠标移到一个按 
钮上时会触发 omnouseover 。 然后，这个事件会运行为指定的 畝杉栉 到 一 个相在 f 的 f #灸电$ 
敁后 一个事 件处理程序： buttonOver () 0 沒辦 :1 用： ^“ 《洲 0 时,()。 







ocuayiCK^ 



mJERnEDIRJE 
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事件处理程序 K 1 厲性 

为 XHTML 元桌上的一个倒 t •指定杉 件处 理程序时，这个和汁•处理程 序会 
成为该元素的一个诚性，就像 <a>；t 素的 id 成 title 祕性-样。 



XHTML 文件 


onmouseover = showHint 


title=advanced 


href=# 


< a > 元素 


<a> 的象有一螫嫌性： hef 扣 

ontnouseove 7 0 # 个漢 作邾 笱一个 名扣一 

个氐 


JavaScript 文件 


—个属性 R 能冇 一个 值 

如果为•个 祕性 赋值，这个诚性就将有这一个值。那么对这个域性洱赋 
另外一个值时会发生什么呢？该属性会有那个新浪， 原来的值就没有了。 



JavaScript 文件 


冬先 . jficnmouseovei % fj 






onmouseover = buttonOver 


咢，：.义 ^°^ouseove7 洛 时一个 
6«tton0v<i" 





< a > 元素 

依 "buttonOver" 琢瘃的 * 
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addEventListener ◦注册事件处理程序 


钃 


阁 addEveMtUstenerO 持定多个攀仵处 
理程序 


到0前为止，我们都足通过直接设件属性为元桌增加唞件处理程 
序。这称为 DOM Level 0模型。 DOM 代表文档对象梭型 （Document 
Object Model ) , Web 页向‘ t ： 的元素就足利用 DOM 模1*.!的换 Xj 能够在 
JavaScript 代码中处理的对象《 

不过 DOM Level 0无法解决指定多个事件处理程序的问题。我们需要 
一种方法能够为一个事件指定多个事件处理程汴，这意味荇不能简申. 
地为事件诚性指定一个事件处理程序。这就引人 『DOM Level 2^^| 0 
DOM Level 2模型提供 T 一个新方法，名为 addEventListenerO ， 利用 
这个方法可以为一个事件指定多个事件处理程序。 


以下给出 f addEventListener () 方法。 

currentBtn. addEventListener ("mouseover", showHint, false); 


无 f ii •用 ( i 个 方沾。 



/ 




\ 


蓽二个夺赵 IL 事件让理疗璆。这 ，巧 光忽略 
在•士 本中的一个函 赵残老 12 | 夺裊。 
讲以内联地牵蜱一个蚤數。 


currentBtn. addEventListener("mouseover", buttonOver, false); 


;4 M ii ^ : 



- 

你认为浏览器会以什么顺序调用这两个事件处理 
程序？你觉得事件处理程序运行的顺序会对你编 
笱代码冇影响吗？ 
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多个事件处理程序 


tliereiare no 

Dumb Questions 


r^) 2 DOM? 那是什么？ 

^ : DOM 代表文档对象樸型 （ 
Document Object Model ). 这是一个 
规范，定义了 Web 页面上的各个部分 
(如元素和羼性）如何表示为代码能够 
处理的对象。 

I ®): 那么 Level 0 是什么意思？ 

^ : Level 0实际上是 DOM 規范化 
之前犮布的一个 DOM 解释 „所以它与 
DOM 并存，但并不是其中的一部分。 

不过对于你来说，浏汔器就是使用 
DOM Level 0为 Web 页面上的各个元素 
提供基本对象和属性的。为一个元素 
的 onmouseover 展性指定事件处理程 
序时，就是在使用 DOM Level 0。 

1^) : 那么 DOM Level 1 呢？ 黑要 

考虑这个模型吗？ 

^ : 目前还不用考虑 。 DOM 

Level 丨处理的是如何在文档中转移， 
例如利用 DOM Level 丨可以查找到一个 
元索的父元素.或者它的系二个子元 
素。我们将在第6章详细介绍 DOM 导 
航。 

不过，你不必太担心使用哪个级别的 
DOM , 但是无论使用哪一级 DOM , 
郜要确保你的洌見器支持那个級别。 
所有主流浏見器都支持 DOM Level 
0和 Level 1,正是因为这个原因，可 
以通过编枝方式使用 onclick 和 
onmouseover 等 f " 件 A 性指定事忤处 
理 秸序。 


|^) ； addEventListener(> 属于 
DOM Level 2, 是吗？ 

^ : 完全正确 。 DOM Level 2增 
加了很多有关事件如何工作以及如何 
处理一些 XML 问題的蚬芝（这痊问题 
我们暂昱不用考 忠）， 

: 这么说，我可以使用 

addEventUstener() 增加多个事件，它 
适用于所有浏览器，对吗？ 

^ : 只要这些浏見器支持 DOM 

Level 2. 但是确实有一个主流浏苋器 
不支持 DOM Level 2……稍后我们就 
会介绍这个内容。 

I ®): 我可以为事件属性指定一个 
数组，这样一来就可以为属性指定多 
个值了，难道这样做不行吗？ 

^ 2 这个想法很好，但是要由浏 
見器把事忤连接到事件处理裎序，如 
果你为一个事沣展性指定了包含事件 
处理裎序名的一个数组， Web 浏見器 
并不知道该如何处理这个数纽。 

正是因为这个原因， DOMLcvcl 2 得以 
引入： 它提供了一种标准方法，先许 
浏見器处理多个事件。一般地，规范 
往往能实现过锃的标准化，消除所有 
可能的不确定性„ 

R : 为什么事件属性名与传入 

addEventListener() 的事件名不一样？ 

^ : 这也是一个非常好的问 

題，这只是 DOM 作者们的决定，他 
们认为要以这种方式处理事件名。所 


以，如果为一个事忤属性试值，要使 
用 onclicJ^onmouseover, 试对 
于 addE vent Listener () , 則要使用 
click 和 mouseover 。 

| V ^) : 发送给 addEvent- 

Listener() 的最后一个参数是什么？为 
什么你把它设置为 false? 

^: 最后这个参数指示希望完 

成事件浮升 （ false) 还是事件捕获 
(true )。 稍后会史详细地讨论事件 
捕获 (event capturing) 和事件浮升 （ 
event bubbling ), 所以先不用太担心。 
对现在来说，我们总是向 addEvent- 
Listener () 传人 false 表示希望采用事 
件浮升方式。 


值用 ad dBvent listen— 
eK) 可％根辗霈要为亊 
件推定多个亊件处琪程 
疼。 

addBvenil»istener()^ 
用子所有夹持 DOM 
L»eve\ 2 的 決 1 览器。 
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Firefox 和 Safari 是支持 DOM Level 2 的浏览器 

POM Uvel 2 中对象玎从为单个擧件涛定 
多个 擧仵处理程序 

DOM Level 2 为杯 什增 加的敁 t 要的一点 足： -个事件能够注趼多个囀件处 
押.程 rf :。 F 面讲的就是 a d d E V e n t L i s t e n e r ( >如 M 为一个私件增加事件处理 
程序 • 



触芨摹件时，浏览器会运行淡擧件的毎一个事 
件处理程序 

鼠铋移动触发一个唭件时，浏览器会舍找适气的唭件。然后，浏览 
器会运行为该事件注册的每一个事件处理函数。 



你町能认为浏览器 
会以盼先增加私 W •处押程 / T •的顺 
序来进行调用,但这-点并不能 
保证。 耍确保 事阼处 理程序不能 
依赖 P 所调 屮的顺 序。 
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cc^^rpen your pencil 


观在对 Marcy 的瑜珈 Uilfii 做一些改进。以下是目前的 
initPageO 代码，你的仟务适划掉其中不应出现的代码，并增加 
一些你认为必要的代码，使 ffl 像按钮鼠标事件能够正常工作， 
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利用 DOM level 2 注册多个事件处理程序 

^Jharpen your pencil 

w Solution 小•应出现的代码，并增加一些你认为必 

要的代码，使 m 像按钮鼠标啦件能够 正常 I ：作。 



for (var i=0; i<tabs.length; i++> { 


ir currentBtn = buttons 【 i]; f 记 fi • 導外名冬一样的 

H^rontBtn.onmouoGovog --showllint; /u — / 

currewtftw.addEveiitlistewerriHouseover* /howHint, false); > 


currehtPth . addEveHtUsteMcrrwouseout * hideHint false ); 

currentBtn.onclick = showTab; 


currenLBLii.U'rnriuubbfove!? ■ buttor^Ov^c; u 

currewtPtw.addEvewtListerterrmouseover* buttowOver. false); 

currentBtn;onmou5e^tH：—» buttoftOut; ^ ^ 

correwt^tn.addEveiitlisteiicr{ w wouseout" buttonOut, false); 


砹杏 《 个(1 用中这个年數 扣縫用 
后 i ； s 含鸽釦付论箏 


146 第 4 章 


Download at http://www.pin5i.com/ 





多个事件处理程序 


行测试- 

修改你的 schedule . js 。 打开 Web 浏览器，试试现在使用 addEventListenerO 的图 
像按钮。一切正常吗？ 



■ IfU : f . fS !•) 中边 ( intermediate ) 
«後1：时含电変毬•子 i 本…… 

……兵更沪费安 1 
的接? 2 ®«_ 


OtUBVltK^ 




切 JE 常！下®让 M « cjf 采罨罨 


mRnsstRJE 



一 wi 常吗？孖玩笑吒？现在级承没笮 s 示. 
而 fi © 佴也没布变。到菘怎么©翏？ 


0 


Marcy 的浏览器到底怎么了? 


你认为 M a r c y 的问题出在哪里？力什么这个瑜珈应 


用不能正常[:作? 




他闲％器 
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Internet Explorer 不支持 DOM Level 2 


Internet Explorer 怎么 J ? 


这个瑜珈沉面在 Firefox 、 Safari 和很多其他浏览器 h 都表现得很好 
^'il/+'lntemet Explorer 上却完全不能 J: 作。 


咒 奋蚤下否的杖态裎中 $ 子了一个 
三免®杉。 孜 忐坏个 .) •三穿耵以 
看到 这个抟 沒消甚 


0 Internet Explorer 

__ 、.— 


Problems with this Web page might prevent it from being displayed properiy 
double-clicking the warning icon displayed in the status bar 
i_ 占 ways display ths message when a page contains enrors 


/Oti 


其个患伐或方法 ? 



J 


Line: 7 
Char : 3 

-Error Object doesn't support tNs property or method 
Code 0 

URL http://headfirstlabs.com/books/hfa|ax/ch04/cla$se$.html 


你无法拉锏伊户儇芹 

36 粽的应用……一装 
要在很多>伺的韌览 
芻中濟试你的代碚 a 
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Internet Explorer 使 ® — 个完全不 

同的擧仵模型 

还 ill 份 addEventListener 0 只适 j: i [持 DOM Level 2 的浏览 
器吗？没错， Internet Explorer 不属干 这一类浏 览器。 IE 有 ft ci 的 
寧件模型，不支持 addEventListener (} 。正是因为这个原因， 
Marcy 在 IE 上尝试瑜珈页面时会得到一个错误 , 

幸 y 的足， 1E 也提供了 - 个力•法可以 2 成与 addEventListen- 
er() 同样的 [ 作，这就是 attachEvent (>。 


currentBtn.attachEvent("onmouseover", showHint); 

>f\ r 


4 internet 中嫌 

加蘑 4 it 炫存 錡明的 方 a 
法。 俘穿 一 0 




V 

{7 % j^attachEve”t()(5i 數接 
供霹4黾法的 M H 寧4让 
理枝咚的&數名。 




fltt . d < rAEu e » u () 中不再 


attachEvent () 和 addEventListeMer() 

在功能上 是 f 价的 

w 管语法小 m 这两个闲 数完成 的功能 都一样 所以只志针对用 
户的浏览器使用适$的涵数。 


currentBtn. 


attachEvent ("onmouseover", 


的 Jnt 打 H«t Exploieivi*) "t § 

沒用 attac / iEventO . Internet Explorer 


showHint); 


currentBtn.addEventListener("mouseover", showHint, false); 


的子 Fne<cu … ii! 一 ^ 




0 


OpeiA . 


@ 



.^ ^ ^ It 

真姑珑代洌想器. 
^adJEve»ti lstenej (y 



持 _ UV *〖 2 的 

别％器。 
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欢迎加入浏览器之争 


坨歉 打断一 7, ( S 达碥实; fc ： 傻 
7。 IE 的人是怎么想的？ 兩 个&数 
完成完全相阁的功能？ 



浏览器之争一直是 Web 开发的发展历程 
中不可避免的一 部分。 

不论你足否接受，确实扑 作所有 浏览器 
都一样。另外，在 Microsoft 提出他们的 
事件模吧时，还否小出 HGDOM Level 
2会旮如此蓬勃的发展。 

不论怎样，总之 W 代码时小能只针对使 
JH 1 E 的人……也不能特定 f 不使叫 IE 的 
用户。 

tKereiare no 

Dumb QiiestiQns 



R : 这是说 哪一个 浏览器更好一 

些吗？ 

V : 不.我们的意思只是并非所 

有浏見器都采用同徉的方法开犮。直 
到不久以前 DO M 都还不是很明确， 
Microsoft 只是决定朝另一个方向发秩 
并不是说 [ E 比其他浏見器更好，也不 
是说它更不好，只是有所不冏而已。 

: 我悝了，不过所有人都知道 

旧让人很头疼 , ，我的意思是说 …… 

^ : 确实，大多 ftWeb 开发人员 

认为出处理很困雎，这只是因为它使 
明了一种不同的语法，不过，从另一 
个角度 来看： 如策你一直都在 IE 上编 
写代码，那么反而是 Firefox, Safari 和 
Opera 会让你头疼了 „ 

不论怎#，都应该编写这于所有主 
流浏見 器的 Web 应用，否則你会失去 
很多用户。 
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l 1 ^) : 为什么 attachEvent() 中事件 

名前面又有了 ~on" ? 

^ : 这只是 IE 实现这个方法时所 

篆用的做法. 

|p) : addEventListener () 的最后一 
个参数呢？在 attachEvent () 中这个参 
数到哪里去了？ 

S 你应该记得. addEvent - 
Listener (> 的最后一个參牧指示你希 
望采用事忤浮卄 （fa 1 se > 还是事件捕获 
( true ) 方式。 IE 只支持 f 忤浮升.所 
以不需要这个参軚， 

等我们完成了 Marcy 的应用，能够用于 
所有主流洌見器之后就会再来讨论亨 
忤捕获和事怦浮升。 


:那么我该用哪一个方 
法呢？ addEventListener () 还是 
attachEvent()? 

V 2 问得好。如果你仔细考虑. 

并 _0■ 再 to 回去看看 createReque- 
s t ( ) A ti , 可能就已经知道答案 

了 …… 

在丨 E 中，事件劣前 

W 有 “ 0 " ” ,例 

知， 44 one lick n 和 
44 onmouseover" 0 

在 Fire fox 、 Safari^ 
Opera ^ f 亊件系節 W 
次有 “0 "， ，扣 u clic^ 
和 44 mouseover n 0 
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工 - j 与 createRequestO •样，我们希空倒4•处押代码适用干多个浏览 

器。你的任务是使用下而的磁贴达立一 个工具 函数， 用丁为 事件增 
I 加事件处理程序。 



将返回 true ， 如果不支持这个函数则返冋 false 。 
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工具函数可以抽取浏览器的差别 



工兵薜势贴考寡 


你的任务足想办法使事件 处押代 码能够在多个浏览器 h 运行，并要 
让 立一个 T . 具 w 数4事件增加事件处现程汴。 


(i 个函敦奴洱盔 ' 主 此拳碑 的一个对象 • 


••… • 摩 4 名 . io click 
武 ^ouseovet 


.. 以苁翥呤让理益數 < 


^ r et ―用 


9 

handler | ) 

] - 

； j 



— 



i£ € DOM Level 2 


a 


t 


^^^^ iMventi lstene , 


thereiQre tig 

Dumb Questions 


问： 


这里为什么没有用一个 “ try … catch ” 块？ 

^ : 当然也可以使用 “iry ”catch” 块，不过不柯于 

createRequest(), 这个 A It 不需要一个错误来指出那里 
出了 问题 》 使用 document.attachEvent 考 adocuinent. 
addEventListener 就能很好地工 作。 另外， “if."else if” 

块 ㈨ 读时容易得多。 
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如采我不兩爯抱心会增加多个事件处 J 1 ^ 
找序泫 多好， 达难 iiR 是一个梦码？如粜我 
P , t 一 盗使用 addEventHaiidlerO 工爯&数就》 

3 …… 我想达玎能 R 是异想天孖咜。 






./ ttt- . 

m Wi 


►: 
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频繁地使用工具函数 


addEventHawdlerd 适用子所布皮用 , 
而不 R 是 Marcy 的瑜伽页 ® 


那么 addE vent Handle rO 的代码放在哪里呢?我 f 门将 / i:Marcy 的瑜 
珈 ijr 面屮使用这个函数，不过这实际卜.是一个丁.具函数。它适用 r 
所冇应用， iftm 吋以 用丁任 何浏览器。闪此，可以把这个新代码增 
加到 utils . js ， 这样在以后构违的 Web 应川屮就可以 t 用这个 rn 
函数了 0 


function createRequest() { 
try { 

request = new XMLHttpRequest (); 

} catch (tryMS) { 
try { 

request = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (otherMS) { 


try { 

request = new ActiveXObject("Microsoft.XMLHTTP"" 
} catch (failed) { 
request = null; 



9 心 () 


function addEventHandler (obj, eventName, handler) { 
if (document. attachEvent) { 


obj.attachEvent("on" + eventName, handler); 

} else if (document.addEventListener) { 

obj.addEventListener(eventName, handler, % false); 

} 



utils.js 


芻的 X 兵备势， 
鉍要将抑些方法 

中轻 

松重芹的脚本中^ 
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7 i 更新 iwitPageO 采使用 
新的工爯凼数 


观在需要修改 s chedu le.js 屮的 initPage ㈠ ， 这里将 使用 
addEventHandler(), 而不是 addEventListener (>。可以对你 



的 schedule.js 做以卜'修改 




at/J ^vencUs( ene} () 
: f 用， ©# 右 
iM-f DOW Level 2 
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运行测试 



运行测试 


现在已经有了 utils.js 中的 addEventHandler(), 另外 schedulers 中也有了更新后 
的 initPage ()。 完成这些修改后，可以在 Internet Explorer 和一个 DOM Level 2 浏 
览器中（如 Firefox 或 Safari) 尝试浏览这个瑜珈页面。 



Uve ( % 赛中一忉正 
玄 ii 用子泛昼到 宽器。 




…… 龙 24 有麻堍 , 


W • ' »*r - r-. -wr 費 

V k « 

.•一 .. f* • A k< 


(£ 袅达一:欠沒 <5 
报耆托茯… 



…… 尽蓍軋沒夸 s 糸祺迕, 
©蒗杉蜉 0 5 F 戋年 
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使用 alertO 查错 

由于没有任 H 错误消息,因此很难准确地知道 Internet Explorer 到 
底发生 r 什么。不过，可以在事怍处理程序屮增加一些 
alertU 语句，你会呑到事件处理程序确文正确地得到了调用。 

function buttonOver() { 

alert (buttonOver () called.); 

this.className = active; 


function buttonOut() { 

alert (buttonOut () called .)； 

this.className = 


那么还冇什么会出问题哝? 


事件处理程序确实得到了调用，这说明 addEventHemdlerO 确实 
像我扪预期的那样完成了工作。在增加随鼠标移动改变阄像的功 
能之前，我们经看到原来事件处理程序屮的代码能够正常工作。 
那么到底问题出在哪电？ 

function buttonOver() { 


this.className 

} 


’•active"; 



坏么十 2 含出闷趑喵 


function buttonOutO { 
this.className = 



你认为可熊是什么洵拯？ 

你難奢出为什么代碚浼有按预想的抑 

样 X 怍？ 
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我们希望得到事件处理程序的所有者 



我们知遂 css 能正常工作，而 a 
showHint () l « hideHint ()& 败中篝进布 XMrt 
容？。邠么 fi 漼饫是达个 “ this ” 引用布问 
聪，对不对？ 


“ this ” 是指当前执行的函数的所有者。 


JavaScript 中的 “ this ” 关键字总是指示正 
在执行的这个闲数的所有荇。所以，如果 
方法 bark U 由一个名为 Dog 的对象调用，那 
么 bark <) 屮的 this 就会指 ■向这 I^Dog 对象， 

使用 DOM Level 0指定事件处理程序时，发 
生 4 f 件的元桌就足所冇荇。所以，如果 
指定 tab.onclick = showTab ;, 月么 
s ho w Ta b ㈠ 中的 “ this ” 就会桁[^] tab 尤 
紊。 这就是卜 •一 章屮 showHint () 和 
hideHintO 能 | 卜:常工作的原闪。 


“乐 眘老 '"和 ■’ 用寺4 不柘 
罔碟一个 WdIT . 唛中.剤免器 
.> ；1 ® ^ ^5 & ^ . 不过表斤•贡安 

充老 • 



在 DOM Level 2中，发生事件的对象仍是其事件 
处理程序的所有者。 

使用 DOM Level 2浏览器时(如 Firefox 、 Safari 或 
Opera ) , If 怍处理椐架将 K 什处 现程序的所有 
者设 S 为发生 r 泫私件处现程序所对应事件的 
对象。所以会有 DOM Level 0 M 样的行为。正是 
基丁这 个原闪，我们的私什•处理程序对干 DOM 
Level 2浏览器仍能正常丄作。 

但足 IE 呢？ 
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IE 中擧仵处理程序的所冇者是的擧件 
框架， 而不 I 当 前活动的页 i 对象 

你 Ll 经知道， 1 E 没有实现 DOM Level 2。 IE ^ j _ 「1己的私什处理框架。 W \ y ^ 
以在 IE 中， 事件处理函数为这个事件框架所 有， ifii ^ H 
通 过点，私件 或鼠栎柊动节件激^ if 一个对 t 也就"^ T ^ wTab ( V|i 
的 “ this ” 是指 1 E 事伴框架，而不足 Marcy 的瑜珈 Web 0( 面 h 的-个 tab 元紊。 


濟 ㈣ 


function showTabO 
var currentTab 


this. title; 



存圯中,攀 4 让疼枝專中的 
- t » us " !祚拳4 让迮 牦架中 
巧二个的象 》 


X 


\ 


广 iJE 中 • 使用 -Hus'- 


\ 


\ 

I 

/ 


旧事件处理框架 




/ 


tliereiOl 

Dumb 


1^) : 那么 “this” 到底指示 IE 框 

架中的哪个对象呢？ 

^ : “ this ” ！是指向当前运行 

的函 ft 的所有者.所以，在 1 E 事件怄 
架中.事件 处理枝 序中的 this 会指向怄 
架的某个对象 # 

这个对象到成是什么并不特别重要， 
因为它没有多大用处。我们需要的只 
是能有办法得到犮生了事忤的那个元 
景的有关信息. 


are np o 

QuestJQns 


: 但是如果 IE 采用这种方式处理 
事件，我们在第 3 章编写的代码在 Internet 
Explorer 上又怎么能正常工作呢？ 

^ : 前面编写的代码在 IE 中之 

所以能正常工作，这是因为我们只 
使用了 DOM Level 0语法„只要是 

为属性指定一个事沣处理裎序，如 
currentBtn.onmouseover = 

showTab, 这就是 DOM Level 0 语法 0 

不过现在的代码使用了 add Even t - 
Listener (> 和 attachEvent <)。这 

不是 DOM Level 0, 现在 this 与前面代 
码中象示的对象并不一样。 




r^) : 那好。这么说，这个页面在 
Internet Explorer 中还是不能正常工 
作 . 现在该怎么办？ 

^ 2 嗯，先花点时间考虑一下你 
到4需要什么， “ this ” 关鍵字本身并 
不重要.而是这个关键字元许我们访 
问的信息相当重要。 

事沣处理 J ； 軚中到氐需要痊什么呢？ 
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我们需要一个 Event 对象 


attachEveMtO 和 addEventListewerO 为 

擧仵处理程序桡供了另一个参数 


JavaScript 很酷的一点 足： 声明闲数时不需要列出那些阐数的所有参数。 
所以即使你的函数声明是 showTabU ， 但凋用这个函数时还 " f 以为它传 
人#数。 


function showTabO { 

var currentTab = this.title; 





// etc. 



对此也存不好的-曲_，和时会遗浞或忽 m 传人 w 数的参数^ 


必硒把 " t / lis " 努籌的另一个? I 用. 
We 6 否蒂 I ：耗 lii 个$4的的象。 


它 遂祚命 


擧件处理程序会从 attachEventO 和 
addEventlisteher () 得到一个 Event 对象 


使用 DOM Level 2和 addEventListener () 或者使用 
attachEventO 和 IE 注册一个事汁•处理程序时，这两个框架 
都会向事件处理程序传入一个 Event 类型的对象 0 

奉件处理 程卬吋 以冉使用这个对象来确定页面 h 哪个对象被一 
个事件激活，以及 H 体触发 f 哪个事件。 


具体来讲，我们需要知道两个特別有用的域性。第 
一个是 “ type ” ，这会提供所触发事件的事件名， 
如 “mouseover” 或 “ click ” •第二个是 “ target ” ，这会提 
供事件的 F 1 标，即页向 i : 被激活的对象。 


Event 对象梦筮 
卿个对象觫矣 3 
事件,也沪狻亊 
件的炙犁是什 

Emu 村象 



Event 对象 


(it 錡黾 生搴碑 栌名》达务 4 
入 adEventUsUnrO 的 $ 相同 . 
如 "mouseovei 或 d « 


' 搴哼的的象. io^Jeb ^ 
‘杉蒼毋或一个 (}1 ( 象 9 


§ ^^ I 


V ； 
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* 町 汉々钟 分辜呤 公疼基 


又 4 if 用 E v * ■ 


时象系不 


i? 




对于 DOM Level 2浏览器，吋以使用 “this” 或者传入 
# 汁处押 .程序的 Event 对象朿得出哪个元桌被激活。你 
认为这两种方法有优劣之分吗？为什么？ 
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f I 为 Event 参数 命名， 认便擧件处 
理程序处理 

不必列出 JavaScript 函数耑要的所有参数。但是，如果确实希嗜在函数 
中使 IH 这些参数，则必须将 K •列出。 t 先，我们畨要在事件处邱程序 
屮访问 Event 对象，从而确定贞面上的哪个对象触发 f 事件处理程序 
调 W。 然后，耑要列出对应这个 Event 对象的参数。 







target 还是 srcElement? 

target srcElemewt 

你说的是 1 t_ato, 我说的 Itonratfr' 


IE 和 DOM Level 2 浏览器都 " J ■以提供触发了事件的对象，这 点 很好， +好 
的是 ， DOM Level 2 和 IE 使用 T 不同版本的 Event 对象，它们分別有不 Ml 的属 
性。 

有呰情况 I 、' Event 对象的属性指示的是同一个东西，但是属性名+同。更 
m 糕的迠， 1 E 的现代版木会传人一个 Event 对染，而较 V 版本的 IE 则通过 
window;<•] ■象的 - 个诚性宋-提供 Event ■象。 

支持 DOM Level 2 的浏览器，如 Firefox. Safari 和 Opera, 都会向事件处理程序传入一 
个 Event 对象，这个 Event 对象有一个名为 “target” 的属性，指示触发了事件的对象， 



Internet Explorer 7 向事件处理程序传入一个 Event 对象 3 这个 Event 对象有一个名为 
“srcElement” 的属性，指示触发了事件的对象。 



较早版本的 Internet Explorer 通过 window 对象的一个名为 “srcElement” 的属性来提供触 
发了事件的对象。 
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♦ ♦ + 

你认力 ft 己确灾 r 解浏览器吗？下而这个小测验可以帑助你检査自 lL 的了 
解程度。哪些浏览器玄持左边的各个 M 性、方法或行为？在相应浏览器 F 
的框屮打勾。祝你好运！ 






• 令 ' 


O' 

令 - 

clJ<iEVentLlstenet() 

□ 

□ 

□ 

□ 

□ 

si-cE lenient 

□ 

□ 

□ 

□ 

□ 

DOM LeVe] 2 

□ 

□ 

□ 

□ 

□ 

tOlget 

□ 

□ 

□ 

□ 

□ 

aJ JE Vent Han Jlev() 

□ 

□ 

□ 

□ 

□ 

VtU' cuiTentT^l"* = tilts.title; 

□ 

□ 

□ 

□ 

□ 

DOM LeVel 0 

□ 

□ 

□ 

□ 

□ 

\Vln«Jt»W.svcElenient 

□ 

□ 

□ 

□ 

□ 

attacjiEVentO 

□ 

□ 

□ 

□ 
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你现在的位置 ► 163 


Download at http://www.pin5i.com/ 





Internet Explorer 还是 DOM level 2? 


♦ 


♦ 







你认为 d 确实 r 解浏览器吗？ 这个小测验 4 以帮助你检许 ti 己的 r 
解程度。哪些浏览器女持左边的各个 w 性.方法成行为？仵相敁浏览器卜' 
的框中打勾。 


r j 个 OOM Level 2 SSL . 
的以光不1 轉: 

I 

qJJIj VentLi stenel() 






.令 




□ ST E3" □ 


SlcE lenient 



开的 辦夸赵 本布右 2 
个屬 1*1， 任斛 


□ 


DOM LeVel 2 

c fjOO^i Level 2 : Mt^ 

toilet 

li 基我 fH 的 工真涵 
七 一 - 數 . 辦 W 沒 辦苟列 
uJJEVentHiinJlevO 七 ' 器工•却稃用 


El 


2» 


2» □ □ sr 

□ or or □ 

□ El BT □ 

BT [^ E ( 0 


\ LeVel 


0 


^invent/ aI-* = tMs.t?tie; 0 

of4 

^ r / 

“1；这似不 ! . )0 的’。 

、VV • SIcE IeiTJent |~~V 

普板本的 J E 将 
stc ^lementJ^Ol^ I~~I 

m ^ OhfT ^ 象的一 个洛作 LJ 


SVentc) 


3 a [^ 3 

m 鏐 
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□ □ □ E» 
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多个事件处理程序 


tlierejore no 

Dumb Questions 


R : 那么 “this” 总是指调用函 
数的那个函数了？ 

^ : 不对， “this” 指示為 敫的所 

有者。有时这是另外一段代码，钽也 
有可能是一个对象.如被点击的一个 
标签页或表单。 

；但在 Internet Explorer 中不 
是这样，对吗？ 

^ : 在 IE 中， “ this ” 仍然指 

示函数的所有者。区别在于，使用 
attachEvent 0时， Aft ■的所有者是 

IE 亨 件处理柜架中的一个对象，而不 
是 Web 页面上的一个对象， 

1^) : 这么说.在 Internet Exp 卜 
orer 中是不是不该使用 “this” ？ 

^ : 实际上， “ this ” 一直是 

JavaScrip 〖中非常有用的一个内容，不 
论你使用丨 E 还是 DOM Level 2 浏见 
器.钽是如果在编写一个亨件处理函 
ft , 可能最好要避开 “ this ” ，如 
果你在编写一个亨忤处理毡序，而 
且将使用丨 E 夢件 处理怄架通过 
attachEvent 0来调用这个函 ft :， 那 
就该避免使用 “ this ” 。 

为 Web 页审扶伊 
3—个基子对奂的梂犁, 
妒俱 代碚逬行处琪 》 

geiB\emeniBy}d()^ 
document^ % 

屑惟鞒: fe 在代碚 
中俱芹 DOJW 的例孑 u 


R : 我还是不太滴楚有关 dom 的 
内容。你能再解释一次吗？ 

^ : DOM 或文档对象糢型 （ 

Document Object Model ) 是 i •刘見器 
将页面表示为对象所采用的檨型。 
JavaScript 使用 DOM 来处理一个 Web 页 
面，所以每次改变一个元素的属性或 
用 getElementById ( >得到一个元素 
时，就是在使用 DOM , 对目前来说， 
你只需要知道这痊就足够了，不过在 
后面儿章中将会史深入地讨论 DOM 。 

R : 不过，只要使用 

addEventHandler(), 我就不必操心所 
有这些 DOM 问题，对吗？ 

^: 嗯，你不用操心应该使用 

attachEvent () i £^ addEvent - 
Listener 0。仅是在系6章中会看到， 
还是有很多 DOM 工作要做。 

addEventHandler () 负贪以一 
种浏見器中立的方式向一个窨件 
注册事件处理裎序。换句话说， 
addEventHandler () ii 用于所有现 
代浏 It 器。 

I®) 2 就因为这一点才把它放在 
utils.js 中，对吗？因为它是一个工具 
函数，是不是？ 

:没错。 addEventHandl - 
er <) 追用于所有浏見器和很多不同类 
型的应用，而不只是 Marcy 的瑜珈页 
面， 所以最好把它放在一个可重用的 

脚 本中，如 utils . js 。 


: 但是即使我们使用了 

addEventHandler(), 还是存在 
target 和 srcElement 的问题，对不对 ? 

:对„ 1 E 7通过 srcElement 属 
性向麥 件处理裎序传入一个 Event 对象， 
它指向触犮了事件的对象.较早版本 
的 IE 則通过 window.srcElement 展 
性提供同一个对象。另外 DOM Level 
2浏11器利用一个 tartget A 性来提供 
Event 对象指向触发了事件的对象。 

: 我以前听说过这个对象被称 
做 “ 激活对象 ” ，是同一个东西吗？ 

没错，激活对象就表示 
Web 页面上发生了一个事件的对象， 
所以如果点击了一个图像，表示这个 
围像的 JavaScript 对象就是激活对象。 

|p ) :既然 addEventHandler() 能 
够负责在所有浏览器上增加事件处理 
程序，为什么不干脆再建立一个工具 
函数处理这个 target/srcElemen 〖问题 
呢？ 

^ : 真 是个好主意！ 
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再谈工具函数 


那么爯体泫怎祥_1激蝕芨擧件的对象喂? 

IE 和 DOM Level 2 浏览器处现第件的<式 +N ，要处押这种差异性， 敁好 
的方法是违 it 另一个 T . 具函数。我们的^件处理函数现在会得到 Event 对象， 
但我们 ft 正需要的是激活 对象： 这个对象表示豇面上发生 T 杯件的元桌。 

下向违 立一个丁具阐数，获取从浏览器得到的事件参数，确定并返 M 激活对 
象。 


function getActivatedObject ( e ) 
var obj ; 
if (! e ) { 

II early version of IE 
obj = window . event . srcElement ; 
} else if ( e . srcElement ) { 

// IE 7 or later 
obj = e . srcElement ; 

} else { 




杖旱城本的 JE 丈眹工•不含 
这样一个对羲 . 


由此扰确 f 曩检奩 wl ” aow 的象 
的 sicEtf 务枝。 


JE 7 夯 •个州 ii 
江基我 <05# 的 达 


// DOM Level 2 browser 
obj = e . target ; 






return obj ; 





utils.js 
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多个事件处理程序 



需要洱次更新 Marcy 的代朽。江所有私怍处理程 ;if: 中，需要使用 getActivatcdObjcctO 得 
到激活对象，还耑要柊改其余的方法来使用这个函数返 N 的对象而不是 “ this” 。 M 
外，有呰修改前而已经做过。 H%\k •个仟务就打勾以示完成。 


♦ 


命 


更新 utils.js 。 

在文件中增加 addEventHandler (> 和 getActivatedObjectO 。 

getActivatedObjectO 


addEventHandler () 


使用 addEventHandler() ， 而不是 addEventListener ()。 

使用通用 addEventHandler () 抽取出 DOM Level 2和件处理模型的差 
別。 

电新 initPage <} ，从 ifri 只使用 addEventHandler <> 




使用 getActivatedObjectO 而不是 “this” • 

更新所有事件处理函数，使用 getActivatedObjectO 而不是 “ this ” 关键字， 
还耑要紂艽他函数进行柊改，使之能 iH 常工作。 


showHintO 

buttonOver () 

showTabO 


hideHint () 


buttonOut () 


如果你认为任务 lL 经完成，■以先荇运行应用。然后翻开卜 - 
页，看看我们在 schedule.js 和 utils.js 中是如何更新代码的。 
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DOM Level 2 中避免使用 “this 



你的任务是完成 schcdule . js 的修改，使得所有事件处理程序都要取-个 Event 参数，并 
使用 utils . js 中的 getActivatedObjectOUK •闲数得到激话对象，还耍刪除囀件处押闲数中 
的所有 “ this ” 引用。 


window.onload = initPage; 
var welcomePaneShowing = true; 


function initPageO { 
var tabs = 


document .getElementById( r, tabs M ) .getElement:sByTagName<"a">; 
for (var i=0; i<tabs.length; i++) { 
var currentTab = tabs[i]; 


currentTab.onmouseover = showHint; 
currentTab.onmouseout = hideHint; 
currentTab.onclick = showTab; 




var buttons : 

document .getElementByld("navigation” ） .getElementsByTagName( ,t a u ); 
for (var i=0; i<buttons.length; i++) { 

var currentBtn = buttons(i); 

addEventHandler(currentBtn r ’’mouseover” ， showHint); 
addEventHandler(currentBtn, ’’mouseout", hideHint); 

currentBtn.onclick = showTab; 

addEventHandler (currentBtn ^ .’mouseover” ， buttonOver); 
addEventHandler (currentBtn, ’’mouseout•’ ， buttonOut) 


ii 一 毕芍锌以铯 3 
1 來 f 多个拳辞让 

； ^ ^ ； a((<IEvcntHfln^tet() 0 


/ 




} 


function showHint(o) { 

if (!welcomePaneShowing) { 
return; 

} 

var me = getActivatedObject (•); 
switch (me. title) { 


以 ㉟ 以以 SI 



case .’beginners ••: 

var hintText = ’ .Just getting started? Come join us"!; 
break; 

case "intermediate": 

var hintText = Take your flexibility to the next level!; 
break; 

case "advancecT: 

var hintText = "Perfectly join your body and mind" + 
"with these intensive workouts."; 

break; 

default: 
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var hintText = "Click a tab to display the course" + 
"schedule for the class"; 

} 

var contentPane = document.getElementById( M content f, )； 
contentPane.innerHTML = ,f <h3> + hintText + </h3> M ; 



schedule.js 


function hideHint(e) { 

if (welcomePaneShowing) { 

var contentPane = document.getElementBylcK^content^); 
contentPane.innerHTML = 

"<h3>Click a tab to display the course schedule for the class</h3>’_; 

} 

) 


■function showTab(e) 
var ooloe^dTab ■ 






常 Ip ^etf^ctivAtedOb^ectO 
达©的的象称的 me O 


var me = getActivatedObject(e); 
var selectedTatb * me.title; 

if (selectedTab == "welcome") { 
welcomePaneShowing = true; 

document.getElementById( ,, content f, ) .innerHTML = 

M <h3>Click a tab to display the course schedule for the class</h3>"; 
} else { 

welcomePaneShowing = false; 


// everything else is the same. 


} 


function buttonOver (e) { 

var me = getObject(e); 

me. clasaNameActivated = "active” 

— - "aotiivo"; 

) 

function buttonOut(•) { 

var me * getActivatedObject (e); 
me.className = ^ - 






fUf 
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确实赛效了 



运行测试 


这个过程真足很漫於,不过最后两-次测试 Marcy 的瑜珈页而了。肴看在 lEgJDOM Level 
2浏览器中坫 巧郎 能一切正常。 


右 ' i a 磬 




r • . ^ J ( r 




-> 


大衿 5 ! 现逢用 St 
0 的钍 If 桴穿也秸正 

tld 


7 


> » 一 兔 .… 



V PROG ‘ 

y °f 


RpnnsRS ii 



Tmk€ yomr flnJbflfel ， Id ttw nut ke 






inrsenfjwrs 
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亊件镇字游戏 

花点时间坐下来，让你的右脑活动活动。 回答卜 '面提出的问题，然后使用所 
填的字母按指定的数字顺序得出密佶。 

这个模型使用 object.event = handler! 吾法。 


123 4 5 6 7 8 9 

DOM Level 2 中使用这个函数注册事件。 



10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 

这是 Marcy 所教的课程。 


26 27 28 29 


Internet Explorer 中使用这个函数注册事件。 


30 31 32 33 34 35 36 37 38 39 40 


这是触发事件的对象。 


41 42 43 44 45 46 

用户按下一个按键时会发生这个事件。 


47 

48 

49 

50 

51 

52 

53 

54 

55 








22 6 

13 

39 31 

35 10 55 

18 

19 16 28 

19 

20 

32 35 

5 49 15 

26 

17 2 

19 23 

40 

7 25 

29 34 21 19 

37 

19 41 51 
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你的原则 


亊件镇字游珙 

你能发现密信叫？你 N 息这个观点吗? 


这个模型使用 object.event = handleri 吾法。 

POM I E V E I 0 

~1 2 3~ ~4 5 6 7 S - ~ 

DOM Level 2 中使用这个函数注册事件。 

APPEY^NTLISTENER 

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 

这是 Marcy 所教的课程。 

Y 0 ^ A 

26 27 28 29 

Internet Explorer 中使用这个函数注册事件。 

ATTACHEYtNT 

30 31 32 33 34 35 36 37 38 39 40 

这是触发事件的对象 3 

r a r a t r 

~41 42 43 44 45 W~ 

用户按下一个按键时会发生这个事件。 

0 N K E Y I? 0 W N 

47 48 49 50 51 52 53 54 55 


EVENT H A N R I I N & 

22 ~6~ 13 39 31 35 10 55 ~1 ~ 18 19 28 

IS THE K 1 Y TO 

19 20 32 35 5 49 ~1T~ 26 17 2 

INTERACTIVITY 

19 23 40 7 25 29 34 "~21 19~ 37 41 51 
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歹舁步 应 /?) 


命 



♦ 



像重新申请驾昆 


射心杗爱的， 钬怕到 
你 


你是不是等烦了？是不是很厌恶这种长久的等待？可以利用异步解决这个问题！ 

前 tfri 巳经通过创达过几个贞而村服务器发出异步请求来避免用户等待页面刷 
新。这一章中，我们还会史深人地 i •〖论 构达异步应用的详细内容，你将 了解异 
步到底是什么意思， 学如何使用多 个异步请求， 甚至还 " r 以违立一个 监视器 
函数， 从 rfn 避免这种异步性把你和你的用户搞糊涂。 
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我讨厌等待 


异步到底 I 什么 f S ? 


异步请求坫指 Web 服务器对沾求作出响应时+耍求你等待。这说明，你不会馑在那 f ft 
动弹 不得： 你以继续做你想做的唞情，并让服务器在处理完请求时通知你。下面朿 • 
深人了解这个内容，首先肴看冋步请求足什么，再与异步沾求进行 比较。 


对玎乐的同步清求 




对玎乐的异步清求 



£ M. _ 
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达汰护它 .1 •芍分柒 C 箾你 
芍以处你 g 处的 fi 何搴代 。 
不含兵 f 象同令 M 邦咩不虹4 
«f. ~~— 


R “<“ s ^ 柒的，伐勿糾槊 
门个球: f . 正妗？以沭息 


结集4一 样的： Ct-t !•)) 巧 
jf . 。 不过 S 則在子：存芩 ^ 
的过炫中你不爯1麯殚不得。 
( 一 
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异步应用 


你一疽鄯在构建异步应用 

洱来##第 2 仿为 Mike’s Movies 影评 M 站构辻的应引。 用广键 
入用户名后离开这个域时，这个值会立即发送到服务器进行验 
证。小过，完成这个验 i 正的 N 时用户还可以继续填写表承的 K 
余内容。这是 W 为我们在以异步方式向服务器发出请求。 


•thinking’ 


function checkUsernameO { 

document .getElementById( M username M ) .className 
request = createRequest (); 
if (request == null) 

alert("Unable to create request**); 
else { 

var theName = document.getElementById( ,, username r, ) .value; 
var username = escape(theName); 
var url= ,, checkName.php?username= M + username; 
request.onreadystatechange = showUsernamestatus; 

request .open ("GET” ， url, true); 
request, send (null); 


^^) c ^ eckUse ? nan \ e () 




2 revest ope«() 的圣 .§ 这个 4 ■數噶 ; ，这 
表-子 妁一个 耳涉碣求，不用卢 


} 


在 知賑 务器邕 
送一个 t 屬求。 




采务# fe® 螭在數旖 , 如…扣 Sut *， 



function showUsernameStatusO { 

if (request.readyState — 4) { 
if (request.status == 200) { 
if (request. responseText = 


响 6 數馮 


豫务器 

^ Ip ^ is H 
这个® il 4 
敌 


« "okay") { 

document .getElementByld(username) .className = 
document.get Element ById( M register M ) .disabled = 
else { 

document .getElementByld<"user name”）.className 
document.getElementById( f, username ,, ).focus(); 
document.getElementById( f, username H ).select(); 
document .getElementById( M register f, ) .disabled = 


••approved .’； 

false; 

= f, denied M ; 


true; 



褢多器的角冇处 u •及 
妒沐布暑用户趄 _ 
g 表聿的 阌扭 宕 嗲奸 . 
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异步应用 


不过，布对你 fl 很少注意到 


构达 Mike’s Movies 影评 N 站时，你 " f 能很少注意到这种异步性。应用与服务 
器之间传递的请求，特別是在开发阶段，此时没 有太大 的网络流最，吋能拫 
本不会花费多少时间。 


一 ©用户鍵入一个用户名， 
«后處孖 ii 个镇.舦含 
谈用 cfiecfcUs «« aw »*0。 



si 。 

給 t.i _ 

用户名 


validation.js 



ii f 不 f 多少的问！呢务器 
几4含 i 卯响 S 。 


9，你 a 来不 及镇入爯姑内容 
就雠 i 印看到这个“―”田俅。 





showUsernameStatus () 


validation.js 




但是一个实际网站的响应时间往往会比 较慢。 会有史多的人在竞争 
服务器资源，而且用户的机器和连接在能力和速度上可能都比不上 
你用千作程序开发的机器。这共至还没 有考虑 到服务器作出响应所 
需的时间。如果服务器在请求连接一个很大的数据库，或荠必须完 
成大量服务器端处理，这也会使请求和响应周期变慢。 


询几 孑总是比羽试 
闪 銥要惟 a 

要明确应芹的暴现, 
唯—的办法鉍 :&在 
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需要口令检査 


既然谈到 E 多的服务器端处理 


Mike 非常喜欢你为他构让的网贞， + 过还籽 呰 新的想法。他的 M 站越 
柬越火，俱有些人借用穴•他人的用户名发了 - 些冒名 If •论。 Mike 需要你 
在注册友单 i : 增加一个 U 令域，异步地验 ilF . ⑴户名和 U 令，把那些不受 
欢迎的 Ml f •永远杓住他的系统之外。 


Mike 有-个服务器端程序，可以用检査口令的方式来确保口令至少包含 
6个字符， ifiiH 其中至少打一个字母。付 f 一个影 if 网站 来说这应该足够 




噢，要増加 O 令检验 . 

Mike 实际上希望有两个 U 令域。第 个 口令值发送到服务器来完成验证《« 
第二个域用于重输口令。这两个 U 令域中的值必须-致。我们将在客户 
浏览器 h 处理这个问题。 




是不是 还要冇 些视觉效果？ 


用户点击 “ Register ” 按钮时,在请求得到处理之前可能要等待很长时 
间， Mike 不希望这样。由十我们要求用户在注册之前+允许进人网站， 
所以 Mike 另外想出了 -个 办法： 提交和处理表单时，他冶免能滚动播放 
他收集的电影和海报图片，这样能把用户的 R 口吊起来，使他们迫切地 
想肴， _i 平论。 ⑷朱— 

‘眘老 ^ -^ i ke 。 
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异步应用 


parpen your pencil 


Mike 的 M 站还志耍做很多 T. 作。以 r 给出 r 这个应用敁终版本的-个 
截屏阁。 F 面沾你指出增加 Mike 要求的所冇? f 为需要完成哪些交5。 




o 今鐵 。食 
j 令 Mibt 的 

这；个喊。 



片五•子奋否哥下方. 



mhei2M)il 疙 i 本杉出 
有矣 o 今的 f 求 9 吋扑 
• c - f f 术 A ； f 多沁 HTML 

o 


\ C 3 f 


Web 服务器 


不要忘 id 服务器端需求!对干 Mike 应用的这个版本，需要两令不 M 
的服务器端进程。在以 F 箭 iU •.加 h 标签,指出向服务器发送什么， 
W 外你认为响应屮会发 M 什么。 


在技余 哚务器么， 



( 请求 ) 嘯 
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我们需要做什么？ 


^Sharpen your pencil 

7 Solution 則 ' Mike _ 隨雜讎細 ft 純麵额师細& 

_ 些行为需要发生哪些交互。 



仍 赭& 辁征。\ 


用户轸 入一个 o 今蚵 
^^-tJavaScuvUi 


••…它甸碾务器&达—个 
碲來 f 朱宪盎 0 今妗位。 


Web 服务器 


_• 搞纽，電$宄成 
鰣以也锊聋震磓用 


你能得出 JavaScript 需要向 Mike 的服务器发送什么吗?另外服务器端 
程序应当发回什么? 


仍疼 f f 检 f 用户名 。^ V). ii k 
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歧2 0今来；£碱砼苻 3 



，以沒用冏样的畴左. 
" oka n" "detued" 

O 
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异步应用 


Kf 多个简单步骤，实现 （ E 多）异步性 

需要完成 Mike 的 Web 页面，然后增加他希锒的所额外交互。接 K 来，我们要 
想办法提交他的表黾并在豇面下方完 成那呰 ra 像的动_。 

本章中我们将通过以下步骤实现 Mike’ s Movies 釤 if 网站的改进版本。 


❶ 


更新 XHTML 页面„ 

耑要再增加两个 n 令域： 一个用于输人I〗令，另一个用十检验该 n 
兮 9 我们还需要一个区域放置那些电影 ra 片。 


e 


验证用户的口令。 

接 F 来需要处理用户的 U 今。必须让立•个事件处理函数，它取 • 
个 n 令作为参数，把「I令发送给服务器，并违立一个 N 调来卉苻 n 
令是否合法。然后类似 于用户 名域，可以使用同样的 fflfeih ⑴户知 
道他们的口令是否合法。 


个 0 今域一 
K 0 


0 提交 表单。 

最后，必须建立提交表单的代码，汴仵页面 k 方完成阁像的动_。 

"T 以把这个代码关联到 “Register ” 按钮的 click 私件，而不是通过一 f 5 读奚代砝來拢交表輩.罔的 
个正常的 “XHTML Submit ” 按钮来提交表单。 我们必獨宅成 ff (象访至。 
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更新 XHTML 


f 要兩个口令域和一个放 M 纣®© 
fi 的 < div > 

必须为衣单增加两个 u 令域，然后还需要 fr : 页面 F 方增加一个 
〈divWAS 所有封向1句片。以下示了应当对 registration , 
html 做哪些修改。 

<html xmlns= ,, http://www.w3.org/1999/xhtml M > 

<head> 

<title>Mike # s Movies</title> 

clink rel="stylesheet" href=”css/inovies.css" /> 

〈script src= r, scripts/utils.js f, type="text/java script M ></sc rip t> 



今嗑的皂嗲 „ 

"passwo^ 

< 吏妁人 4 不衫 
用户拎入的 


<script src =,, scripts/validation.js M t ype= M text/java sc ript M x/script> 
</head> 

<body> 

<div id= u wrapper M > 

<hl>Please register to access reviews:</hl> 

<form action="register.php" method="POST"> 

<ul> 

<li><label for= H username ,, >Username:</label><input id=.’username" 
type="text M name= ,, username M /></li> 

for= M passwordl M >Password:</label><input id* ,f passwordl M 

/X/ 


C , 電蛑 validation . ，5馉和- 

4 


聋*?平个續 a — 
^餘入初始 cj 今.另一 
丨用子检铃 ( ij 个。公 

*7 


<lixlabel 


/li> 

Label 



types'^asswora" name= M passwordl" 
for^”password2”>Re-enter Pa58word:</label><input id="password2" 

password2" /></li> 


name: 


<lixlabel _ 

^_^^ type= M password' 

<li class=”tip">Passwords must be 6 or more characters and 

contain a number.</li> 

<lixlabel for= M firstname M >First Name:</labelxinput id=.’firstname" 
type= M text M name= f, firstname 1 ' /></li> 

<li><label for="lastname">Last Name:</label><input id= M lastname M 
type="text" name=”lastname" /></li> 

<li>< label for= ,f email M >Email:</labe lx input id= ,, email tt 
type=”text" name= ,, email , ' /></li> 

<li> 

<label for= M genre M >Favorite Genre:</label> 

<select name= M genre" id="genre"> 

<option value= M Action w >Action</option> 

<option value- M Comedy H >Comedy</option> 

〈option value= M Crime ff >Crime</option> 

〈option value= w Documentary , ^Documentary</option> 

〈option value= M Drama M >Drama</option> 
coption value =,, Horror M >Horror</option> 

〈option value= f, Musical M >Musical</option> 

〈option value= ,, Romance M >Romance</option> 

<option value= ,, SciFi ?, >Sci-Fi/Fantasy</option> 


d 个核 釜祚出 
M i fc « 的 O 令 鴦 
求. CSS # 玄萁 
样式妗丞。 
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异步应用 


<option value="Suspense’’>Suspense</option> 
〈option value =,, Western f, >Western</option> 
</select> 


</li> 

<li><label for^ f, favorite M >Favorite Movie:</label><input id="favorite" 
type="text M name="favorite" /></li> 

<lixlabel for= M tastes M >Describe your movie tastes:</label><textarea 

name=" tastes" cols="60" rows=”2 M id= M tastes H x/text a reax/1 i> 
<li><label for= ,, register ,, x/label><input id=”register" 

type- M submit f, value- ,f Register n name=.’register" /></li> 

</ul> 

</form> _ 这 f 柘劣 罱辈 9 我们详加 3 一个笱 

id 的〈山 v 〉. 

<div id= n coverBar M > 

<img src="images/coverMatrix.jpg" width= ,, 82 n height="115" 


㈣ ⑽ 


style= n left: Opx"; /> 

<img src= n images/coverDeadRingers.jpg" width="82" height= M 115 M 
style="l©ft: 88px"; /> 

<img src="images/coverDrStrangelove.jpg” width="82" height="115" 
8tyle= M left: 176px"; /> 

<img src= M images/coverFuturama.jpg" width=”82" height="115" 
style= n left: 264px"; /> 

<img src=”images/coverHolyGrail.jpg" width= M 82" height=’’115" 
styl©="left: 356px"; /> 

<img src="images/coverRaisingArizona.jpg” width="82" height="115" 
style* ： ’.left: 444px"; /> 

<img src= M images/coverRobotChicken.jpg M %#idth="82” height=”115" 
style=”left: 532px"; /> 

</div> 

</div> 

</body> 

</html> t^ere 






从 Head First Labs 网站下载 CSS 
和图片。 I 

仵 Head First Labs 网站下栽第 5 竞 
示例。 你会# 到一鸣封而图片， 
以及对应这个 XHTMI . 的新版本 
regist-ration.html, 另外 
if 有一个与这个新 XHTML 对应 
的新版本 movies . css 。 


tberej^re no 

Dumb Questions 

: 为什么在这些封面图片上使用 style 属 

性？ 把样式与 XHTML 混在一起不是不好吗？ 

V : 没错但是除此以外唯一的选择 是：对 
于< div >中的每一个围像分别有一个不同的类。 
尽量使内容与表示分离固然很好，但是如果这样 
做会使你的 XHTML 和 CSS 很麻烦，那么有时就得 
打破常规，保证 XHTML 和 CSS 更可管理，谁会患 
意维护10个或15个不同的 CSS 类呢（每个 CSS 类分 
别对应一个电影图片> ? 
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运行测试 


-緣 i 行测试- 

试一试 Mike’s Movies 影评网站……现在增加了 口令和图像， 

-旦完成 registration.html 的所有修改，或者如果 LL 经 K 钱了示例，就可在你的 Web 湖览器 
中打开这个页面。 确 保所冇封面图片正常显示,而 E 有两个口令域。还要检査用户名域 
是否仍会向服务器发送请求来完成验证用户名， K 外豇而拧次加钱时 “ Register ” 按钮是 
禁用的。 


Mike's Mov«es 



Fwortv 
ir tistct: 


mum ： 


用户名域仍左 i 常 i 
Of 。 在茂祐移龄入 
-个用户名 .(% I )- 
个 •！ 沒公運’_ @杉. 
蛘后$矛_个的 勾或 
-个 X 。 


<5 电» ® 玲 …… 
丟. 象功 ii 签® 
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异步应用 




H 前，你应该 d 经很淸楚如何把！ Jiifiih 的-个私件4要 
求一个服务器端程序处理某些数据的请求绑定。把以下 
磁贴放在适当的任务下而。大多数怙况下这些步骤的_ 
序并不重要，所以只黹明确这些磁贴能帮助你完成 fl •么 
任务，并相应地放置磁贴。 




碎琏 tXHTMLd 芍 
以宅成下一乡：妗讼 O 

今。 L 一 


处理 擧仵: 


向服务器发送一个清求 对象: 
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练习答案 





你的任务是建立•个过程，将 Web 页面上的 
个如件与一个服务器端程卬 关联。 


处理事件 




.套存主事件并宅的 H 均，如菜 
■ it $< tar £ iii % , 0么也不食漱. 



创建 - 个回 调闲数 ，它将作服务器响设请求时得到调用。 
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如柒 f 要新的行为，玎能 f 奚一个 
新的擧仵处理也数 

一旦用户在衣单的口令域中输人了内容，就必须验证口令。所以 
需要一个新的事件处 理程序 来验证 M 令。还需要力适当的 U 令域 
注1批一个 onblur 韦:件处程序。 

在 validation.js 屮， ti 经在 initPage() 屮设置广_件处理程序， 
所以只需两增加一个新的事件处理程 r m \ H . 0 



曼浙 XHTML fi S 



function initPageO { 

document .getElementById("username"> .onblur = checkUsername; 

document. getElementById("password2") .onblur = checkPassword 

document .getElementByld("register") .disabled = true; ，个 . 

} 戏们猝 t 名一个辜— 

function checkPassword() { ^ ^ ^ ^ ^ ; ^ ^ 

// We'll write this code next j if i 4 ^ ^ fj 


tliereiqre up 

Dumb Que^iQns 


: 为什么不使用 

addEventHandler () 来注册 
checkPassword () 事件处理程序呢？ 

^ : 因为我 们 只向 password] 域指 

定一个事忤处理权序《如果这个域需要 
多个事件处理裎序，那就该使用 DO M 
Level 2 或者 IE 的 attachEvent <) 了 。 如 
果是这徉，你可能希望使用 add Even t - 
HandlerU 。 不过，由于这里的事件只 
有一个事件处理彳 i 序，所以 我们还 是使用 
DOM Level 0 。 
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两个口令？ 


^Jharpen your pencil 
、‘ Solution 




不 龙 求你的爹,•耷此 m 同 • 
不 过左找 找常戏运 


Mjf I 么 checkPasswordO 要注册到 password ] 域而 H 
password 1域，你认为原因是什么? 

佘苋务器发 ( MO 今乘完威鲶讼二前 
電鋈检查采个 o 今破此差否一致。 

辦 W •存用户#禺个 o 今域郝输入 o 
今 C ： 前何么也不敍後 L 


M ke's Movies 




^ J "T3 办 vww cc ， .9oc-i c"OS 


1 … 墨】 



如霉 # _ 个 o 今 
域中珩一个 2. SJ 
W 命兔务器迨达一 
个请求 . 


.fS 4 如菜藥二 

个 e 今硪耷二不一 
玫古 3 .么样哫： c 
镔栌 i ♦糸将 音先 
务义。 
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异步应用 



匕 me 脱 


键示 


现在来编写一苎代码。 使用前向得 出的结论，再加上下面的提示，应该能够写出 

checkPasswordO 亊件处理稅序和 show Passwords tatusO 回调函数的代 。 别紧张 . 你 

能做得到。 I 

k 盎 含奋《 | •器巧 

V 系求这—个命在封运 

不 廖 4 处 g 炫 4 ^ 

" thihkmg - 的 CSS ^, 玎认用达令类设 X : 个 o 令域，从 x ^ ^ * 1 # 

r _A_ a i M ▲ 邊 ■ «~i •一 a^% a. t M 4A • M UK. *«\ ^ _ 1 A — 、 • •-' 


笮一个名为 " thinking " 的 CSS 类，玎认用达令类设8某个 w 令域.从 
而得到一个“正在处 H ” 的扭标。另外布一个 “ approved ” 类 S 示对勾 
©#. 认及一个 “ denied ” 类 S 示 x © 标。 


服务器上验 iio 令的稃序忮子 URL “ checkPass . php ” 。 达个 IS 序取一 
个口令，如果 o 令是含法的将返矽 “ okay ” ，如果 o 令不含法則返 
矽 “ denied ” 。达个程序的参数名是 “ password ” 。 


㈣乎 
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发送一个口令请求 



你的任务足:编‘ ScheckPasswordO-^fl: 处理程序和 showPasswordStatus(>M 调函数的代码。 
fi fi •你的芥案 U 我们的答案迠 A 接近。 


function checkPasswordO { 


由子溅 q 古丈 f 1用妗入續七黃 
i f t Ct 杧合 i 


var passwordl = document .getElementByld("password 1");—— 
var password2 = document .getElementByld("password2 ")； 
passwordl.className = "thinking"; - 一 c 幵邊 . 索 IS 孑 i ^ ^ ^ 

// First compare the two passwords 


if ((passwordl.value == 


passwordl.className = 


return; 



11 (passwordl.value != password 2 .value)) { 

;i .多 .pacsw‘”d I 嘁不# 交 

拿 tc’tfia? 个蛾的 


"denied"; 名光 . 


如集 0 空的 o 今不一致.酌 S 系 
一 个铕获 斿磚止让理 


-个” 


// Passwords match, so send request to server 
var request = createRequestO; 
if (request == null) { 

alert("Unable to create request"); 

} else { J 

var password = escape (passwordl. value); 
var url = ,, checkPass.php?password=" + password; 
request.onreadystatechange = showPasswordstatus; 
request.open("GET", url, true); , • 
request .send (null); 


o 今域暮托兩的: 


I 个#求烕老一个骂今: •# 求，会綦古 f 和 

ii 一 ♦. ntl$ …… 
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异步应用 




function showPasswordStatusO { 
if (request.readyState == 4) { 



if (request.status == 200) { 

var passwordl = document.getElementByld(passwordl); 

if (request .responseText == ''okay M ) { «- ^ E ok a i" 5*J 

pasiwid f 域 5 •子 _ 个吋勾 g« ^ 

password l.className = ''approved ’’； 

document .getElementById(' 、 register") .disabled = false; 


'denied ”； 

. . *$ f>) pflSSWi'lJ I 


如某 C 今 7 含 4 

故 i css 类 . 




else { 

passwordl.className = 
passwordl.focus 0 ； 

passwordl.select(>; . a 〜' I . :" - 

document .get Element Byld(''register ,/ ) .disabled = true; 


；S (i f 禁用 Rc ^' stc: 

m! 






there »are no ^ 

Dumb Questions 


l^) : 口令要作为 GET 请求的一部分发送吗？这样 
做安全吗？ 

^ : 这个问题问焊好！我们将在系12幸史详细地 

讨设 GET 以及它是否安全对于现在朱洗.我们只强调 
异步的有关内容.稍后会讨论如何更好地保障 Mike 用户 
口令的安全性 


1^) : 我试过了.可是我觉得还有一些问题 ••… 

^ : 兵的 吗？什么问題？你认为是什么导致出现 
这*问題？试试我们的代码.看看能得到什么，在啷 
呰方面可以作改或改进，试着只输 入一个 Ifl 户芯或者只 
输入合法的口令，肴着会犮生什么？ 
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运行测试 


行测试- 

Mike 的页面外观和表现如何？ 

完成对 validation^ 的修改，或者使用你自己的版本(只要它的基本功能相 同）。 然后试 
宥运行这个! nifti。 会发屯什么？你认力我们 的代码 能运行叫？或荇存在 H 题吗？ 


M^e s Mov*es 



用 々名域 (？秸矗掌工0 


og .. 第一个 o 今域<5 

二个 x 。 ii 4 奸” * : 
用户穿仓 0 系？ fic fs 
论 ii 个问蛀 
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幼牦士悻栌 


作为用户 


你的任旁长把乍己当成: fe ； V * il < e 的—个 
著户……拆夂彔>诔度扣当佚，可 
夢试〜试，著著先续>〜个用户名， 
然厉很佚在两个 P 呤域中 
_ ^徕>口呤时佘竽生什么„ 


异步应用 



(2 入一 个用户 

S …… 


兵鍵入一次 


逢过进格 ( u 6) 
科第二个 C 

ASSMOliO 惠‘岑 U 


…" ft 后很续地链入 

o 今.一:免 


Mike's Movies 


竽生3奇忸的亊惟鸣？到底 怎么 3? 
侪弘为可炜 是什 么导黪3迗个洵翹？ 
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作为 L 的用户 



缒入一个 

P %…… 


. fi ,% 

C 今.一 . 


_ i 这入 一:之 


H iii ! 珞 （ f fc ) 
( I 秦幵填二. 
c 今喷认籌技生 

chei*bPassrt.”d() 搴 4 ii 


Fsrar^c 
your movlr 


用户名蛾 S 承 H 

W d ，‘) W 

冷 it 汪一仂正當 s 


一 S ; 个和 0 妒 
入， （i 个 c 今噠変 
成 iti a a " ^ 
杉 i 也圣 ^ # 


、 ka ' 

A '- ie ^ . ^ 

ann . < s 4 …… 


用卢名 i 令 求榷本: •逢 
苟达 (T ; ij 个域 
r ? ^ S .-T 
^ (?« 


i^ f MK •士 岵# 


作为用户答案 

侪的任旁; g ； 杷乍己当成;的—个 
者户……芮夂彔>速度扣当佚，可 
%试—试，著著穣>—个芹户系热厉 
很俠在两个 p 4域中鍵 
呤时会矣生什么„ 
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异步应用 


%^harpen your penci 


il 


现在宋 • 分析我们的异步请求到底怎么了。以下显示了 一个 
名为 “requesl” 的沾求变 蛰以及 一个服务器。你的任务 
足 _ 出件柄;出 check User name() 、 sho\vUsernameStatus() , 
checkPassvvordO 和 showPasswordStatus() 函数之间进乎 子的交 瓦。 





showUsernameStatus () 


UlHe44cr= 


5 


validation.js 


f 則 4 




checkPassword() 




UlHe^d«r= 


validation.js 




showPasswordStatus () 


-r 々id， ••二 


validation.js 


request \ 




Web 服务器 


request \ 



^ JavaScript ^ , 两个 JS 系对 
象的斯有—切鞒会矜孳,包括 
祕值。 
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一个请求对象对应一个请求 




利用二土清求对象，安金地芨送和 
綾收 一欠 异步清求 

checkUsernameO 和 checkPassword () 使用 [Hi 一 个请求对象。因为这两个 
涵数郎使用变姑名 “ request ” ， 所以它们使用冏-个对象。 Klfii 来仔细分析 
达立一个请求时发生了什么，这31+涉及口今验证。 



•c(j 玲让用户尽 
出现， 


196 


ch«chUsetMW« 搴4让戌枝咚 
备 .) 違一个4求的象。 





用户名珥到磅 

14 ^ 


找 "okay 以》系正靖法曼 


第5章 


j checkUsername () 


validation.js 


V onreadys 


器命钜多器毪 si 


onreadystatechange = 
sho^ilse^nameStatus 


劍«器该用璜求的象 
onreadystatechange 
作中芩 t 的函尨。 


碾务器 达贫嵙 唤在‘ 


Web 服务器 
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异步应用 


异步清求不傲任 何等待 …… 甚1 包栝它 
们 f 3 •『 

m 坫如裝两个请求共 •: t 同•个诂求对象会发生什么呢？这个对象只能作放一 
个回调闲数来处押服务器响应。这说叫， " T 能行两个完令不同的服务器响应 
由冏 个 N 调函数处理……而这可能并不是正确的回调。 



味 . %? % ^ ^ 

-：i ti t 现同 蛀， 




Web 服务器 


邾 j£, i 1 } sf) 0 wP«SSWOTiStdUs()c 


validation .js 

^U^ eStatus() ^ ^ t (S ， 

严遠不⑽以 

c JE/5 公 I? .， 


我们 .:i 力法 知漾娜个岵在 
的在_个續求! 


Download at http://www.pin5i.com/ 














两个请求对象 _t 应两个请求 


如柒建交遇土不同的清求，使不同 
的清求对象 

IH 理出在我们使用了一个请求对象来达$:两个异步请求。 异 -步的含义是什么? 
#步是指这两个请求不会等待浏览器或服务器的| ( •步动作》所以最后会川•个 
沾求的数椐—个请求的数倨。 

但足，如果有两个异步请求怎么办?这两个请求小会相乜等待，也+会 IhHI 户 
等待，毎个 m 求对象都有 自己的 数据,而+是共卓数据。 
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异步应用 



史新你的代码来使用两个济求对象。必须修改 validation 的多处代64。 fi •行你能不 
能把荽修改的地方都找出来。对与用户名相关的请求使用变最名 usernamcRequest , 
'-j 1 1令相关 的沾求 则使用变量: ^ passwordRequesl , 你认为 ti 经完全考虑好之后，1烊翻 
开 F —页。 


tjiere . 0 ! 

Dumb 


nre no o 

Questions 


R : 这些与异步有什么关系？ 

^ : 嗯，可以这蛘来考忠：如果 

验证用户名的请求不是异步请求会怎 
么蛘？这徉一来，在用户名请求完成 
之前就不可能犮送口令请求，所以这 
个问题在同步坏境中是不存在的， 

1^) : 那么干脆让用户名请求作为 

一个同步请求不是更容易吗？ 

V : 这蛘做确实会史容％.不过 
这蛘能得到最好的应明吗？如此一来， 
ifi 户就必堝等待用户名处理完，然后 
(而丑只能在此 之后） 他们才能移到口 
令域 4 有时最閻单的技术方案实际上 
是 可明性 最差的方案， 

1^) : 为什么两个请求变星会共享 
同样的属性值呢？它们不是各自在不 
同的函数中声明为局部变虽吗？ 

^ : 看起来是这徉，但 

是实际上 request 最早是在 
createRequest ㈠ 函 ft 中定 
义的。不仅如此， request 在 
createRequest ㈠中定义时没有加 
var 关鍵字。 JavaScript 中在為敦内部声 
明的变量如果没有 var 关鍵字都会成为 
一个全局变量， 


R : 那么为什么不直接在 

(^631686口11651()中使用乂3「关键字 
来修正这个问题呢？这样不就能使 
request 成为局部变虽了吗？ 

^ : 问得好，不过这会导致另卟 

一 些问題如果 request 是局部变量，那 
么回调函 ft 如何访问请求对象呢？回 
调函 St 要求 request 是全局的，这样它 
们才能访问这个变量和它的硃性值. 

R : 那么把请求陚至两个变量名 

有什么帮助？ 

I 在 JavaScript 中，试值采用复 
制方式 处理.而不是桉引用处理.：所 
以将一个变 童蚨为 另一个值时，新变 
f 会得到所蚨值变量的一个副本.考 
忠以下代码： 

var a = 1; 
var b = a ; 
b = 2; 

alert ("a = " + a ); 
alertC'b = " + b ); 

你可能认为两个值都是 2, 时吗？但实 
际上并非如此》 JavaScript 釋 ■ var b 
a ; 时，它会创達一个新的变量，名 
为 h , 并把 a 的一个副本放在这个变量 
中，所以不论你对 b 做什么处理，都不 
会改变 a 。 

对于请求吋象，如果创建两个变量， 


并把 reques 〖賊值到这两个变量，就会 
得到原请求对象的两个副本。这两个 
蚀立的请求对象不会相互髟响。这正 
是我们想要的 

R : 哇.这么麻烦。我还是不明 
白……我该怎么做？ 

^ : 你可能需务找一本好的 

JavaScript 书，比如 《Head First 

JavaScript 或者 《 JavaScript : 
The Definitive Guide 》 ，来了解 
JavaScript 中有关变量作用域和赋值的 
史多内容。或者你也可以继续读下去， 
逐步把问题弄清楚， 

JavaScripii /^^ 

泛外声明的所有变 
f 声明时求有 
如 var 秀镇字 的变糞 
都是 纟 眉的 。 迗些 
变糞可％在任何地方 
由任何逄数坊 
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从一个请求对象变成两个 



t»OH 


修改 registralion.js 文件中 checkUserNameO 、 showUsernameStatus {)、 
checkPassword () 和 showPasswordStatus() 函数中的所有变量名。 


function checkUsername() { 


document .getElementByld("username") .className = "thinking"; 

， usernameRequest createRequest Q ; _ 哉们将迻用 •子今 

去戌这个琢 t if (usernameRequest == null) 用户名检奢 冇关的 t . 青求的象 

j. 我们 I 求 alertC'Unable to create request"); 

叫 “ else { 


-个 i •易 变蜃 . 2 
样® 函敦彳被 
用这个変蜃。 


var theName = document.getElementById("username").value; 

var username = escape(theName); 

var url= "checkName.php?usei:naTne= •’ + username; 


usernameRequest. on readystatechange = showUsernameStatus; 
usernameRequest. open ("GET", true); 

usernameRequest .send(null); 役 f | 行扣黾 达蛐 求耷以铊一样。 


} 


function showUsernameStatus 0 { 


if (usernameRequest .readyState == 4) 

if (usernameRequest. status == 200) 

( if (usernameRequest .responseText 


{ 

{ 




"okay") 




Z 基©妁 ii I 的 
# 5 ^ VJ. # $ 

^sejname^e^uest ^ 
含易 $ f : a 个 
史 i # d 裝必砀技 
问 ii 个时象。 


document .getElementById("username") .className 
document.getElementByld ("register") .disabled = 
else { 

document. getElementByld ("user name") .className 
document.getElementByldC'username").focus(); 


document.getElementByld ("username") .select (); 


="approved"; 
false; 

="denied"; 


document .getElementById("register") .disabled = true; 


} 


} 


function checkPasswordO { 

var passwordl = document.getElementByldC'passwordl"); 
var password2 = document.getElementById("password2"); 
passwordl. className = "thinking"; 
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II First compare the two passwords 

if ((passwordl.value == 11 (passwordl.value != password2.value)) { 

passwordl.className = ''denied"; 
return; 


II Passwords match, so send request to server 
passwordRequest = createRequestO; 

耷一个求 if (passwordRequest == null) { — 


一样. 
不曩迻用 


耷 O 今仗兵的汶求。 


alert (''Unable to create request"); 
else { 

var password = escape (passwordl.value); 
var url = ''checkPass.php?password=” + password; 
passwordRequest. onreadystatechange = showPasswordstatus; 
passwordRequest. open (''GET ”， url, true); - 1^) 

passwordRequest. send(null); 〆- 象的爆作 3 。 



} 

function showPasswordStatusO 


if ( passwordRequest . ready St at e == 4) { 
if (passwordRequest. status == 200) { 

var passwordl = document.getElementByldr'passwordl"); 
if ( passwordRequest . r e sponseTex t == ''okay w ) { 
passwordl.className = ''approved ”； 

document.getElementById(''register"> .disabled = false; 
} else { 


passwordl.className = 、 'denied"; 
passwordl. focus {); 
passwordl.selectO; 

document .getElementByldr'register") .disabled = true; 

} 







这个注册飪 曲还存 在一个问题，你能发现这个问 
網？ 
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检验与限制 



验证既要求检验又要求限制,, 





检验坫确保某个数椐能够 U : 系统接受。限制是 
指作完 成检睑 之前 不允〖午用户做 M ； 个动作。好 
的验 iit 要结合这两个；/而。 

编写 M i ke 豇面的第一个版本时，我们在 
initPageO® 数中禁用了 “ Register ” 按钮，一 
H . 服务器验证广用户的用户名，則将其再次 
启⑴。所以这电不仪柃骑了用户名 ，腿制 
\ “ Register ” 按钮。 

但是现在又有广另外一层验证:必须确保用户 
的 U 令是合 法的。 小过，好像出广点问题…… 
尽莳 n 令被柜绝，还是会启 m “ Register ” 按 
钮,以至 I* •用户能够点占这个按钮。 




要求松和 


D 


tfiereiai 

>urnb 


re n<? 

Questions 


I 1 ®) : 启用 “ Register ” 按钮怎么是限制 

的一部分呢？这不合逻辑…… 


在异步应用中，只检验用户输入的数据还不够。尽管 
会进行检验，你还必须对用户作出限制，如果未能 
通过检验，则不允许做只有通过检验后才能完成的 
动作。 


^: 限制是指在检验完成之前不元许用 
户做某个动作的一个过《.所以启用一个按 
钮或激活一个良单是限钊过程的一部分„实 
际上.每个哏制 过枉的 最后都是解除 这个哏 
制. 


202 第5章 


Download at http :// www . pin 5 i . com / 






异步应用 


观在，我们在 iwitPagd) 中禁 ID “Register” 按钮 “ 

影评奴面开始时能正常 T ： 作。加栽页面时, “ Register ” 按钮被禁 
用。 


function initPageO { 

document .getElementByld( ,f username M ) .onblur = checkUsername; 
document .getElementById( ,t password2 M > .onblur = checkPassword 

document.getElementById(''register /# ) .disabled = true; 


么 个抬纽 岐梦宠 


分代事代含这的）。 



……#在桉调蚤数中启用这个按钮 

我们在两个回调涵数 showUsernameStatus < ) 和 
showPasswordStatus () 中启用 “ Register ” 按钮 • 不过，表电上还 
有一苎不正确的动作。 

-^^sernameStatusQ^ _ 

fusernameRequest.responseText == okay) { 
document .getElementBylcU M username M ) .className = "approved"; 

document .getElementById(’.register") .disabled = false; 

else ( 

// code to^reject username and keep Register disabled 



这系个 

成劝宅 " Re5，stel ^ 
往。 


趑. 


if (passwordRequest.responseText == "okay") { 
password1.className = "approved ”； 

4^-document. getElementById( f, register M ) .disabled = false; 

} else { 

// code to reject username and keep Register disabled 
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不能依赖于调用顿序 


异步意哧着不能依赖子清求和响应 的顺序 

发送蚌步沾求时，不能确定服务器会以什么啪卟对这叫请求作出响应。假设验证 
用户名的一个谪求发送到服务器。然后又发送个请求，这-次是要验〖正一 
个 U 令。哪-个会先 返回呢 ？我们无从得知！ 



validation.js 

异歩应伊中铯对>要体移子锖求和响应 
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i^^rpen your pencil 


如果用户名或口令中有一个不合法，至少有一个请求和响应 
序列会导致 “ Register ” 按钮被启用，你能找出这些序列吗？ 
画出或列出导致发生这种情况的步骤。 
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用户名还是口令？ 


^Jharpen your pencil 
、‘ Solution 


O 用户输入一个含法的用户名 


o 


以下两个不同序列都会异致小 lK 确地启川 “ Register ” 按钮 t 
你是否得出了这里的某-个序列?或者与之类似的某种颗 
序？ 

• Re$‘st 打 ^5 •£ 

_ I ^eq ste 





■ 



o 用户输入兩个不一致的 w 令。 


j checkPassword() 

•^IHeAder- 飞 


\ 




validation.js 

O D 令域 S 示 -denied" ( 表示 矩绝） 的 x ® 标 


3 



S 示 “ approved ” （表示 粃准） 的对勾扭标 . 搏启 

两 " Register ” 按饪。 




1 &终 铦某基 穷一个 
合法的 用户名 . 《 
注的 c > 今 . 不£ 
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用户狳入一令不含法的用户名 


o 


用户名矽涓得到一令 " denied " 响成，#设8 
用户名域 S 承 - denied " x ©标。 


个螬 东 扣 味 
在 4 糾沒 o 今 
请 求孖诒 C 前 
軚趄荣5 


用户馆入兩个£紀的 tP 今，而 fi 枏掩 Mike 的标准.达个 o 
令是含法的。 
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可用性很难做到 




实现好的可用性会很困难。 

不论采用 M 种方法，要构逮一个有高可用性的 
应用都绝作易事。住这里，我们增加 f 异步性 
以使 Mike 的注册页面有史好的可用性。在服务 
器验证用户名和 U 令的同时，用户可以继续键 
入他们的信息。 

但是现在这些异步性也带来了一些问题。我 
们需要的是一种能知道用户名和口令都合法 
的方法。然后一只有此时一>1•吋以启用 
“ Register ” 按钮。我 ffj 耑要一个途径来监视各个 
域的状态，并确保 R 有两个域都合法时才发生 
某个动作。 
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g 视器&数……从爲外鉴视你的应用 

我 们需要 •个监视器函数。这是一个能监视某呰变 S 或应用中某呰部分的函 
数，它能根据监视到的情况采取行动。 






^ 未奋 :#求和95^1片 
巧以 sub / •奉到 


iStatua() 



你能看出 checkFormStatusO 监视器函数应该做什么叫？另外还需要调用这个函数。应该 
在代码中的哪 个位罝 调用这个函数呢？如果你不确定，可以先 fi 己考虑一下……然后翻 
开下一豇，其屮提供 r 一些有忸助的提示。 
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监视你的用户 


玎能 fg 采取行动时调用鉴视器 
&数 


监视器函数通常…十根倨多个变设史新应川或豇 ifii 的裟部 
分。所以如果你认为可■能需要更新-个页面时……比如说用 
户名或 n 令通过 「验 iiE 并返冋时，就 " J ■以调 Ml 监视器闲数。 

现在的 傲法： 用户名和 D 令锣调盜揸更 

新 “Register ” 賴钮的 状容 


现在的 M 题在 T : 我们在 s h o w U s e r n a m e S t a t u s < ) 和 
showPasswordStatus (> 中直接史新 “Register” 按钮。不过 这两 个函数都没 
有更新该按钮所需的全部信息。 

~show03ernameStatu80^ 

T (usernameRequest.responseText == "okay") { 
document.getElementBylcK^username'^.className 

document. getElementById( ,f register M ) .disabled 

else { 

// code to reject y^ername and keep Register disabled 




rf (passwordRequest^responseText == f, okay") { 
passwordl.className = "approved"; 

document.getElementById( M register M ) .disabled = false; 

else { 

// code to reject password and keep Register disabled 





况下 波矣用 - 
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T 面让珍调运行 S 视器亟数 


所以不要苠接修改按钮状态，我们可以修改回调涵数，让它们运行监视 
器函数。这样一来就不会由其中某一个冋调出数来确定 “ Register ” 按钮 
应有的状态 r 。 



W 除 5F 个 $) 戌蚤數中 
"Rejistet" 接扭 


现在系个 S ' 戊基數 

Jtch«cbFotmStatus()o 



Tf (passwordRequest.responseText == "okay") { 
passwordl.className = ’ .approved"; 

dogtment i got id i oabl-ed = fa 1 sp; 

checkFormStatus (); 

else { 

// code to reject username and keep Register disabled 


捭让 S 视器亟 数更新 “Register ” 按钮 


由干监视器函数与用户名或口令检査是分离的，它可以得到所需的全部 
信息。这个监 m 器函数可以检查用户名和 u 令域，并作出正确的决定， 
确定应 q 把 " Register " 按钮设祝为什么状态。 


戍器函數砀宏絮用 
^ istet n 拉钿 . 



5: 欠戏金-个用户名或 0 
今 ㈣ -杖食用这 个圣铨 


Reg ste^ 



. . 24启用这个枯扭。 
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监视器检查状态 

鉴视器通过状态变 13 解芨生 5 什么 

我们已经做好准备编笱一个监视器函数来设 S “Register ” 按钮 
disabled 属性的状态。现在两个回调函数都会调用这个监视器函数， 
接下来只需让这呰冋调函数设 W — 些状态变 1 ，指示用户名和口令是 
否合法。调用监视器函数吋以使用这些变被来确定该做什么。 

以卜 • 是 Mike 应用的完整代码，这黾增加了一个新的监视器闲数， 





window.onload = initPage; 

var usernameValid = false; 
var passwordValid = false; 





function initPageO { // initPage stays the same } 
function checkUsernameO { // checkUsername stays the same 


function showUsernameStatusO { 

if (usernameRequest.readyState == 4) { 

if (usernameRequest.status == 200) { 

if (usernameRequest.responseText == "okay") { 

documen t. get Element Byld ( M use rname M ) .className = "approved"; 

ciooumQnt ■qotElQmGntById( l| gegi9tor M ) — false,* - 

usernameValid = true; 

傘茗时在 5F } else { 

个 9 秸的！ 6 务 document.getElementByldr’iisername”）.className = "denied ”； 
document .getElementByld ("username") .focus (>; 
document .getElementById<”usei:name"> .select (); 

document.ggtCi^^entDyld^regiotoc M ) .disabled ■ 二 . Li:ue;_ 

usernameValid = false; 


^ "3 wflt - 不过由 

今 ii 喳 i I 存函 ^ ^ ^ 


useiname^Jalid 


我们不姜髮 
存 H / e I s «的 
f i K 一 个-分 炙中畋 

"Rc§ist«i ^5 


) 

checkFormStatus () ; 




娜下叫 if 




} 


function checkPasswordO { 

var passwordl = document.getElementById( ,, passwordl M ); 
var password2 = document.getElementById( M password2">; 
passwordl. className = ’’thinking ”； 


// First compare the two passwords 
if ((passwordl.value == •".) 11 (passwordl.value 
passwordl. className = "denied"; 

passwordValid = false; 


password2 .value)) 


^ 琛备异 忘记不 •过 • 善。莱。今不 2 
K . 抚索 ■{ 5 HV^sshfotd^JAlid^i 态变 I 
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除3益视器基數以外. 

■ 一' 苒他代砝軔不在设 ® 

checkFormStatus () ; "Rg^istct 括 ?2 的伏备。 

return; 

} 

// Passwords match, so send request to server 
passwordRequest = createRequestO; 
if (passwordRequest == null) { 

alert("Unable to create request"); 

} else { 

var password = escape(passwordl.value); 
var url = f, checkPass.php?password= M + password; 
passwordRequest.onreadystatechange = showPasswordStatus; 
passwordRequest .open ("GET", url, true); 
passwordRequest. send (null); 



validation.js 


function showPasswordStatusO { 

if (passwordRequest.readyState == 4) { 
if (passwordRequest.status == 200) { 

var passwordl = document.getElementById( M passwordl ,f ); 
if (passwordRequest.responseText == "okay ”） { 
passwordl .className = "approved"; 


^tiocumon ； 


.qet£lemGnbById( !l reqioLUT 4 *) .(Jisdl r lbid - ^olnc; — 

passwordValid = true; ( — @ 与用户；闭 “ 

elSe { 心谢咐 4 ， 

passwordl.className = "denied"; ^ ^ … 

passwordl. focus (); 

passwordl. select (); 


5 扣 


passwordValid = £alse; 


checkFormStatus (); 



isa4>led 


« 后戊用 
IS 视器函 


ii 个函垃錡 f 鈦的杖袅桧 
f 系个杖态変 f …… 


function checkFormStatus () { 

if (us^rnamaValid U passwordValid) { 

document. 9 etElementById( T 'regi 8 ter v> ) .disabled = false; 

} else { 

document.getElementById( fl register") .disabled = true; 

} > ^ 

} $撕細禁用. 

琢来史一个合法的用户名我 0 今 . 1 
萁中一个鈹？妗畋迻其中一个 不合法 。 



冉相在祕设 i 
Re 9 istei ' 接钮的 
狄态 • 
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运行测试 



吋子 一^ 合:名 的用户名釦 -个井4 的 
口今. " Register 含禁用， 


^eg S：er 


终于可以测试了!不过所有这些能正常工作吗? 


确保你的 validation.js 弓前两 豇所示的版本 -致。 现在应当有 2 个新的令局变诂，还有 
1个更新后的 checkPasswordU ， 2个 1 _!•史新的1»1阑函数，>5外冇 I 个新的监视器函数 


checkFormStatus(> 0 


加栽应用，尝试205页上练习得出的儿种怙?兄。在这哼怙况下豇卤仍然不能正常 T ： 作吗? 
如果表现£常，说明你巳经解决 fMike 的异步 I ’ nj 题！ 


用“不合^ 


个 g 用的 " Re 5 ,ste, 


孑 eg ster 
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异步应用 


r ^) :你能再解释一下监视器函数 
是什 么吗？ 

^:当然可以，监视器 函敎就 
是一个监梘应用的函数。所以，对于 
Mike 的注册页面，监视器函数就要监 
梘用户名和口令变量的状态，它会修 
改表单，从而与当前状态一致。 

2 我认为监视器函数通常会自 
动运行，比如说以一个固定的间隔运 
行。 

^ : 有时候确实如此。在更强调 
多线程功能的系统中一多线程功能是 
指能够在后台运行的一个进程——通 
常会有一个监视器而敫按一定周期执 
行。这蛘一来就不必诹用户名和口令 
回调中那蛘显式地调用监视器函 

重构代碚 是猝抽聆 
出代碚中矜伺的梆 
卞 ， 并把适些梆穸 
故在—个务子维铲 
的逄数或方法中 0 
重构可代碚 K 
易子 K 新和維铲. 


tliereirire no 

Dumb Questions 

: 为什么不在 inUPageO 中声明 

usernameValid 和 passwordValid 呢？ 

^ : 也可以这么做，不过，如 

果确实在 init : Page <) 中声明这两个 
变量，一定要确保不要使用 var 关键 
字. usernameValid ^ password - 
Valid 必須是全局变量。 

在所有函数之外声明的变 f (有或没 
有 var ) 都是全局变量在 J / ft 内部声 
明但是没有使明 var 关键字的变量也是 
全局的，在函 It 内部声明而且有 var 的 
变量則是局部变量 u 这确实有点绝。 

实际上，正是因为这个原因，我们才 
将这两个变 f 放在所有函数之卟 声明： 
这样可以史清楚地看出这两个变量是 
全局的，而不是任何特定為数内的局 
部变量， 

R : 那么为什么不同样在函 

数之夕卜声明 usernameRequest 和 
passwordRequest 呢 

^: 这确实是一个很好的想 

法，而且你可能希空做此絛改。在 
我们的代码中，这两个变量仍留在 
checkUsernameO ^ checkPass - 
word () 中，因为原来这姿变量（原先 
名为 request) 就是在这 呰函致 中创建 
的。 

R : 难道不能在监视器函数中同 
时设置用户名和 passwordl 域的状态吗？ 

V : 当然 可以， 实际上，这也许 
是一个很好的想法。这说明代码中发 
生的 CSS 类绔改会更少。大多抆显示迻 


辑都由监视器函 ft 处理，目前它已经 
在处理 “ Register ” 按纽的显示. 

只要能够重构代码而不会导致太多不 
好的后果，那往往就是一个好的想法。 
更清晰的代码将史易于修改和絍护。 

: 只是增加一个口令域就把问 

题搞得这么复杂。这正常吗？ 

^ : 在异步应用中.增加一个额 

外的异步请求往往相当麻烦，并不是 
这呰额卟的口令域增加了 Mike 应用的 
1杂性，而是处理这痊域所需的额卟 
请求导致了复杂性。 

: 所有这些工作只是为了让用 
户继续录入信息而不用等待吗？ 

^ : 确实如此。你会惊讶地发现 

Web 用户是多么没有耐心（也许对于 
你可以另当别 论）. 鍵入一个用户名， 
等待用户名得到验证，再键入一个口 
令，然后等待口令得到验证……这里 
有太多的等待。而且史糟权的是，在 
所有这呰等待之后，用户还必須填写 
余下的表单。 

如果能在这里或那里节省几秒钟，累 
枳起来你的 Web 应用就会有很大不同， 
实际上，究免能留住客户还是会失去 
客户，差别可能就在这里。 

: 那么表单提交呢？提交表单 

时也要等待，对不对？ 

^ : 现在你已经走在前面 I •丨不 

过这正是 Mike 要求滚动围涞时所考虑 

的…… 
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视觉效果 


现在 来看最 后一招…… 

Mike 还有最后一个请求。用户点击 “ Register ” 按钮时，页面 

下方的图片应当在处理表单的同时开始滚动。这样一来，在 J ^ ^ 6 

gtpt * 9 

用户等待 Mike 注册逻辑完成的同时，可以提供 -些打 意思的 niLtl ^ 

内容供他们观罚。 



验 iio 令 


a ^ 


幸运的是，这一点不难完成。要实现这个功能 H 志做到如下 
几点。 






f . 4逢 f 一 
u su6mtC 接 
4交象辈。下. 
先 " R «5 *stet 
^粍宠一个 
Ufc 辠件 让成 


下石釗 達一个 乐逐盘 



*« 糾 乘磚用 

scrollJma ies()^ A 


j scrolllmages() 

validation.js 





&o 
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同步阻塞 

罔步清 求会® 窭所冇代码的工作 

发送-个完整的表申.进行处理时，通常希喏这个请求足同步的。这足闪 
为，你不希望用户在服务器正在处理数据时修改这些数据。 

不过 Mike 希嗜用户等待服务器时能够滚动 播放阉 像，这说明，需要在服 
务器处理请求来作出晌府的同时运行你的代码。所以尽管这个沾求作为 
同步请 求更 合适，但这_.还是要把它违立为一个异步请求，以满足酷爱 
图片的 Mike 的需求。 

这并不是一个十全十美的解决方案， m 是大多数情况 f 你都得作出这种 
选择： 要满足客户的需要，尽管结果可能不足太理想。 Mike 打 W •允许 
用户在其请求正在处理期间修改表单（如果他们确实想这么 做）。 不过 
他发现客户汴不会这样做，因为这些滚动图像吸01 了他们的注意力。他 
们会忙十考虑登录之后打算右哪-个影评，而颐不上调粮表申-。 

t 先，不爯 t 要一个 “ subwit ” 按钮 


XHTML 中的 “ submit ” 按钮会提交- 个 表单。由于我们不再需 
要 “ Register ” 按钮来提交表申.，所以可以使它成为一个普通 
的按钮，然后在我们的 JavaScript^ 交表单。 



registration.html 
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异步应用 


其次. t 要为按钮的 owclick 事件注册一个新 
的事件处理程序 


现在耑要将一个事件处理程序关联到这个按钮。我们将把所要 
运行的函数命名为 registerUser()， 然后在 initPage() 中完 
成这个赋值。 


function initPageO { 

document .getElementById( f, username M ) .onblur = checkUsername; 
document.getElementById( M password2 M ) .onblur = checkPassword; 
document.getElementById( ,, register H ) .disabled = true; 

document.getElementById( v> register M ) .onclick = registerUser; 


馮 “ R 巧 istet 拉 
纽的 onclicb 搴件推 

搴件 4 t 疼备致 《 



笫三， t 要向服务 器芨送 一个异步谙求 


敁后，需要有一个新的事件处押函数。这个函数％要得到一个 
新的请求对象，并把它发送到服务器。这应当足-个异步请求， 
从而当用户等待时可以完成动_滚动这些图像。 


validation.js 


下矛电变# a f 的 t 本 



ti 苷邾基 
扣代砝。 


function registerUserO { 

document,getElementById( M register M ) .value = ’’Processing.. 
registerRequest = createRequest(); & 1 ! 4 另一个蛐求 

if (registerRequest == null) { 的象 . 

alert( f, Unable to create request/*); 

} else { ^ 

var url = ,, register.php?username= , ' + 

escape (document .getElementByld( ,f username) .value") + 
escape(document .getElementByld^^passworcil) .value 1 ')— 
escape(document .get Element ById( M fi rst name) .value” 
escape(document .get Element ById( M last name) .value") + 


…… 存个対 象 


f, &password= M 
+ .’&f irstname: 
+ H &lastname=' 
M &email= 


+ 


f, &genre= w + 
M &favorite= T, 
+ M &tastes= f 


escape (document •getElementById( M email) •value' 1 ) + 
escape(document .get Element Byld( "gen re) .value”）+ 
escape (document. getElementById( ,f favorite) .value") 
escape (document .getElementById(” tastes) .value ’’）； 
registerRequest.onreadystatechange = registrationProcessed; 
registerRequest. open (GET, url, true); ^_ 逢常 3 餘姜望把它设 1 # 同珍沒 

registerRequest. send (null); ^ ^ 不过这含 50 $ ® (象的來幼 

(后$几否埒缯知这个祥伐）。 



validation.js 


你现在的位罝 


219 


Download at http://www.pin5i.com/ 







顾客就是上帝 



可用性要 由 旁 观者_ 〜嗯，更确切地讲……要 
由客户来下结论。 


有时荠户做的事怡你 "1 ■能觉 m 艮没道理，而这正 
足为什么他们付账你来收饯的原 w 。 你可以向客 
户迮汶一些候选方案， m 是在最后，还是要按荠 
户的要求来构违应用，这样你会好过得多。 

在 Mike 的这个应用中，他想吸引用户去右他在 
网站 t 提供的釤 ’ Lf ，所以希嘈在用户等待处理注 
册请求时能够比图片滚动播放。不过,这会影响 
表单的可用性。这样一来，用户不再是只能等待 
_•， 他们观在确实能 够在表 萆上键人信总。这 
可能会 lh 人馍不精头帖，不沾饴 Mike 的系统为 111 
户注册的洁息到底是什么 （ if 荇注：这是因为服 
务器处理的信息与用户 n 前在表单 h 填入的信息 
不一致）。 


侪可％徊 者户洚 
诼候迭 方寡，但 
是最鈐几孑总是 



要构洚著户所要 


不过 Mike 以聒吋能会 A lL 认这一点，那时 
也许会再找你解决问题……这+是件坏事，对不 


的应芹 . 斤对? 

管侪 并>伺意他 


tlierejcTre no 

Dumb Questions 

l^) : 图像滚动时我能禁用所有域吗 ? 


^:这是个好主意！你为什么不现在就花 
点时间试试看， Mike 会喜欢的，这蛘做玩实现 
了他提出的围像滚动，而 i 仍能保留目前注册页 
面的可 用性。 不过，我们不会展示这个代码，可 


以把这作为一个额卟加分的小练习. 


220 第 5 章 


Download at http://www.pin5i.com/ 








异步应用 


使用 setlMtervalOii ： JavaScript — 运 行你的 

逬程，而不是由你 t 3 的代码采运行 


s e t I n t e r V a 1 U 是一个很简便的方法。你可以传人一个函数，而 U ： 
JavaScript 解释器反 k 地定期运行你的代码。由于解释器会运行你的代码，所 
以即使你的代码正忙于做其他事情，比如说注册一个用户，仍会运行传人 
setlntervalU 的函数。 


要使用 setlntervalU ， 需要传人一个要执行的函数以及一个时间间隔（单 

位为 215) ，该函数将按这个间隔定期调用。这个方法返 N— 个 token ， 可以用 f 0 00 ws 


这个 token 修改或取消进程。 



以下是 set Inter val() 的 ; Hr 体做法。 



t = 

这个 t o “《芍以 
用來取消用味 


setlnterval("scrolllmages()", 50); ..... 

t S !T 多文狁 

se d»“Tw>t() 的第 - 个夺辁 I 鰣 * 执 ’ y50», s ' 

读 si 在 tif . 我们#望它鴒用一个名 
迖軚基如細 《 w () 方4本夯。为的而钕。托；. 均遑度 的孕 

j 样 含只 ( 本 iiHii 个基數.壬 

ZP . 4 ?1 用。 


/ 


1 ^) : 传入 setlnterval () 的函数是一 

个回调函数吗？ 

^ : 没错。每次经过所设置的时 

间间埚后，就会由浏見器回调这里传 
入的函致。 


there 1 ore no 

Dumb Questions 

: 这么说，在 JavaScript 中能 

做的事情在 setlnterval () 回调中都可以 
做，对吗？ 

^ : 对，你说得没错=对于这个 
凼啟中能够做什么没有任何限制， 


ii f 芍以 fl 用 ff 叼合 •: 在的 
JavaScTipt 代砝 . 忽托 H 名 

AA e 


r ^) :这个回调会发生多 少次？ 

^:在取消这个定时器之前会 
一直 定期执行这个回调。可以利用 
clear 〖 nterval () 取消定时器(间味 ）• 


:那么这个函数的编写与请求 
对象的回调函数一 样吗？ 

^: 嗯，这里不涉及请求对象. 
所以不需要检查任何 ready State 或 
status ^ 性。另外，这里没有要处理 
的服务器响应，所以只需一个每次调 
用时要完成莱个工作的 JavaScript 函 H 


1 ^) : 为什么指定函数时要使用括 

号？ 

^: 因为不涞原来指定穿件处理 

程序那徉，这里不是在设罝一个属性。 
你要具体将代码传速给 JavaScript 解怿 
器。觯痄器会在经过指定间锅后执行 
这些代码„ 


JavaScript 
鈔， 夢 预定的时洵询 
擄令动运行。 
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多线程？ 




setlntervalQ 实际上是 JavaScript 版本的多线程。 

有些编程语言，如 C # 和 Java ， 允 it •你指定在一个笮独 
的线程中执行一个函数。如果计算机有多个 CPU , 那么 
两个不 N 的线程就岈以冋时执行。在大多数计算机上， 
操作系统会在一段时间内执行一个线程，然后切换到 
另一个线程，然后再回来执行前一个线程。这就冇些像 
开车时打手机(不过，先不要考虑可能掩到你左边那網 
SUV 的危险>。 

对我们来说， JavaScript 解释器能够同时做两 件事： 一方 
面保证毎隔几秒执行一次 scrollImages ( h 另一方面 
处理 我们的代码对 Mike 的 Web 服务器作出的异步请求。 
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现在到了最后关头。还有几个工作结束 后就吋 以完成 Mike 的注册页面了……现在你要 
处理所有这些剩下的工作。以 F 列出了翻开 K 一页之前需要考虑的几个问题。 


向 validaticm.js 增加以下成品代码，完成封面图像的滚动。 



function scrollImagesO { 

var coverBarDiv = document.getElementByld("coverBar"); 

var images = coverBarDiv.getElementsByTagName( M img M )； ® ( 象。 

for (var i = 0; i < images.length; i++) { 

var left = images[i].style.left.substr (0 f 村子 S 个5)深，，爱用輿 

images[i].style.left.length - 2); Myfe 属性的 W 性席 

if (left <= -86) { 砝定真劣箣作 E. 

left = 532; ' 



向 “ Register ” 按钮的事件处理程序增加一行代码，告诉 
JavaScript 解释器毎隔 50ms 运行一次 scroll Images <)。 


© 4 是核 'll jdvdScitptf^ 
运 :你可以吝全岵用 
不过， 如菜 f 多磚 

女内容 . 9 fe/ •参考 H ea i f：, m 
hvflScnpt 。 


为异步注册沾求编写-个回调函数。这个回调从服务器得到一个响 
应时，它要把 “wrapper” <«^;^>的内容替换为服务器的响应。 "J ■以 
假设服务器返问一个适合显示的 XHTML 片段。 


翻汗下一页之前先测试你的代码。你 n 定能做得到！ 

你在技 s 绞耷 5 蓽 5 嚎矛例的 css 。 光箾 
跋本的 CSS 中沒<5关子 H 面®沭的样式。 
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练习答案 



你的任务是完成 Mike 的注册豇面。所有问题你都解决 f 吗？我们的做法如下。 



輩。它珥到 一个兮 
在.#龙否矛 i ： j 
< Av > 的内容 


function scrollImagesO { 

var coverBarDiv = document .getElementByld( , coverBar , ); 
var images = coverBarDiv.getElementsByTagName('img*); 
for (var i = 0; i < images.length; i++) { 

var left = images [i] • style .left, subs tr(0, images [i 】 .style.left, length 
if (left <= - 86 ) { r u o 

left = 532; ^ 


images[i] .style.left 


(left 


1 ) + f px 
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行测试- 

下面向 Mike 展示我们的成果。 

这是-个漫长的旅程，因为 Mike 所关心的只是验 iiK 用户名。我们增加了很多内容……下 
向向他展示我们的成果。 



H 力 . 


(VIMW 




..... 务 4 垛务* 的嘀在 
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查词游戏 


花点时间坐 K 来， U ; 你的右脑活动活动。看看能不能从这堆乱七八梢的字母中找出以 
F 关键词。祝你好运！ 


XPRSMOKEJUDHE 
AALAVRETN I TES 
AS 丨 OREMALTRTV 
QSLXHANDLERSL 
CWYORUHAEAYER 
AONNONTLBNEUA 
LREUCSTFCLNQS 
LDTKAHPHNLEEN 
BEYCCERLRXLRR 
AN I THOEOAEDGR 
CUNBNDQBNRAAK 
KNGOFEURLONDA 
NDULRIVFR1UDY 
ASEAD I VEATESD 
JERCICTHRIZAR 


单 询表: 

setlnterval 

Asynchronous 

Synchronous 

DIV 

Handlers 

Callback 

Thread 

Password 

Event 

Request 

Enable 
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Fireside Chats 



今晚 话题： 异步和同步应用的交锋 


同步： 

樣， 好久没 聊了。 

我 是个大 忙人，你不知道吗？而且我会专注千我 
服务的) H 户，不会 It 任 H 事情打扰我。 


他们也会轮到的。有时这样会更好一苎，也就 
是一次只处理一件办，然后再去处理 K 一个任务。 
尽管比较慢，但很稳定…… 

因为我在 T . 作时不会让別人打断我—— 


挟隘？我 H 是要确保任务一旦开始就要完成。 


我听到的抱怨好像不多。 


嘿，享受你的短暂人生吧，朋友。我见过像你一 
样性急的家伙来来去去几百万次 r 。 


异步： 

別开玩笑了。毎次我给你打电话都是忙茳。 

但是你的所有其他用户呢？他们只是在一边 r - 等 
着吗？ 


又是这一套！ 

嘿，我可以边听边说，所有这些都同时进行•你 
太抉隘广。 

没错， m 是如果需要 ios 的时 n 才能完成呢？或 
者 lOmin 呢？再或者足 lh 呢？你真的以为人们喜 
欢看到这个小沙漏在那里转来转去吗？ 

是呀，我倒是离欢整大这柞坐肴， m 足我们的 ) h 
户可不愿意-直等精我。那是你的 W •格，对不对？ 


我敢打赌你 H 定认为 U 2 也足难得一阽的夺迹。我 
哪儿也不会去——我只是让 WebE 有人气。回头 

见…… 
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6 文裆对象模型 


命 

伞 Web 页面森林 ♦ 



迫切 需要： 易于更新的 Web 页面。现仵该你 己动 f 编写一些代码来动态地更新 
wcbin'ifti 了。通过使用文档对象模型，你的豇闹会焕发新的生命，能够响应用户的 
动作，而址能永远摆脱不必要的页面1我。读 A 这-饫之后，你将能迕找.移动和 
史新 Web 豇面中几乎任 H 位筲卜 .的内咨。所以请翻开下一页，我们去 WebvilleTree 
Farm 走-走 0 
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内容还是结构？ 




到目前为止，我们构逮的大多数应用都是先发送请求,得到-个响应, 
然后使 hi 这个响应史新！;(面屮的部分内容。 







尽考史化. M 个 
i ® 栌铉构沒 <5 汝変。 


tr 

KsHnitc Va 

• «b«Ii • _ 


Mn T_ «M fW »« 

_ _ _"~" 

____ 

>_ 


㈣ 二 :… 不' 


PlMse reftster I 


，•^ 一， BMpyi—— 

—， _ mmm man 

^SllB 


ii 个也基如此.: 
_ 个<如>的 i «" eiHT 亂羼 fi 。 



Welcome to Mlke'sl 


^2 f ^ -i ^ 4 
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文档对象模型 


••…或者也玎认改变页 i 的-结 构 

m 足如果不只足改变-个<^>的内容或袢换-个按钮上的标签文本呢？如果需 
要在 ! W hK 正移动一个阁像呢？这该如何实现？ 



浏览器可以改变 Web 页面的结构。 

你巳经看到，浏览器允许你与一个服务器 
端程序交迂，获取豇面 h 的元素，甚至可 
以改变这些元素的诚性。那么页而的结构 
呢？ 

嗯，浏览器也能改变结构。实除上，可以这 
样来 考虑： 从很多力面来讲，页面的结构 
其实就足页曲本旮的一个 K 性。 rfriH . 你匕经 
知逬如 M 改变一个对象的域性 . 
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文档对象模型 


浏览器使用 文档对象糢型表 示你的页& 

浏览器并 个足把 XHTMLf ] 做坫一个乜含人堆卞 W 和欠括 y •的义本文件。通 
过使用文朽对象模 1 W (Document Object Model , DOM ), 湖览器把页面看 
做是一组对象。 


DOM 中所有-切的起点都是 document 对象，这个对象表 A 页面的最“顶 
feT 。 




classes.html 


iocuwent 3^ £ % 7女 tt 1 

碡构 . 结蟑存 XHTIW ■ 中 玄 _ 





documents 象 R 是一个 对象 

你已经多次用过 DOM ， 特别是 document 对象。毎次査找 1 • 个元素时，都 
处作:使川 doc u men t 。 

var tabs = 

document.getElementByld("tabs").getElementsByTagName ("a ”）； 

㊀ 匕 ” t 料 、 一 彻 _ 

实际 h ， 每次把 !;( 曲 _ h 的一个元尜处押为对象汴设 ? ？该对染的诚性时，就 
足在使川 DOM 。 这足 W 为浏览器耍使 WjDOM 来表示 Webam 中的各个部分。 

currentTab.onmouseover = showHint; 
currentTab.onmouseout = hideHint; 

currentTab.onclick = showTab; 

u ㈣ % g SJV/M W 不用拥 

* 分 4 tlf 亡聲漢 avaScupt 的象。 
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文档对象模型 

document 对象深入剖析 

在 Web 浏览器的页面横型中.所有内容都可以使用 JavaScript document 对象来访问。你已经 
见过 getElementByld () 和 getElementsByTagName () 方法，不过利用 document 对象还可以做 
更多事情， 




得到一个文档的根兀素 * — 

,,了 以使 ||!documentElement W 性得到一个 XHTMI 

V ar htmlElement = document - documentElen 


~ 根据 id 属性查找一个元素 

U ' iltf ' ftfil , 通过使川 getE1 . 
竹作找 Web 軸- i : 的装个元挪 
Var tabElement = 

document. aetEl-, 


方法向沉而增加 / i ： 尜和 文本。 




-按标记类型查找节点- 

如果冷爷洱到迖种特定龙喂的 所行疋 素.如所仃 

getElexnentsByTagNameO. 这会返 M 个 数组 . 所以 ; j 

个数 m 朿得 判特定元索。 

var allDivs = 

dL ： cumen'_ . getElementsByTagName("div") • 

var firstPara *= 

document•getElementsByTagName("p")[( 

. 拉 £ o 达 《i ii 个鬏 <£ 中栌 # 一 ' 
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XHTML 变为 DOM 


迖是你編 g 的 XHTMl …… 

创迚一个 Web 页面时，你会编写 XHTML 表示页面的结构和内容。然后将这个 
XHTML 交给浏览器，浏览器会确定如 M 在屏樁上表示这个 XHTML 。 不过， 
如果希嗜使用 JavaScript 修改 Web 5 i _'， 就需要准确地知道浏览器如何处理你 
的 XHTML 。 


假设有以下简单的 XHTML 文 

<html> ^ 


<head> 

<title>Webvi lie Tree Farm</title> 




K 


</head> 

<body> ~ 味记 C 间的 i 冬 I 之枯的内容 3 

<hl>Webville Tree Farm</hl> 

<p>Welcome to the Webville Tree Farm. Were still learning 
about CSS, so pardon our plain site. We just bought 

<a href="http://www.headfirstlabs.com/books/hfhtml /"> 

Head First HTML with CSS &amp; XHTML</a>, though, so expect 
great things soon .</p> 

<p>You can visit us at the corner of Binary Boulevard and 
DOM Drive. Come check us out today !</p> 

</body> 

</html> 
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文档对象模型 


这 I 你的浏 览器所 看到的 


浏览器必须押解所竹这呰砧 Id, 汴以 lit 种方式进行组织，从 rfd 允许 浏览器 
以及你的 JavaScript 代叭——处押 lUlfij。 所以浏览器会把 XHTML 页面转换为一 
个对象树。 


"Welcome to the Webville Tree 
Farm. We’re still learning about 
CSS, so pardon our plain site. We 
just bought” 


“Head First HTML with CSS & 
XHTML” 


a 


'‘ Webville Tree FarrrT 


这嶝袅 DO 吣树 中的不阉 ，分 。 
不过它们二闭” m 





P 



hi 


‘ ， though, so expect great things soon.” 


P 


body 


“You can visit us at the corner of 
Binary Boulevard and DOM Drive. 
Come check us out today!” 



“Webville Tree Farm” 


title 


head 


html 



你认为 DOM 树的这些不同部分 
有什么顺序？另外它们之间如 
M 关联？ 
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DOM 是有关联的 



浏览器把页面组织为一个树结构，带有根和分支。 

浏览器加栽一个 XHTML 页面时，首先是 <html> 元素。由 
干这足!的 “ tU ” ，所以 < html>^；<j 根元素 （root 
element ) 。 


然后，浏览器确定哪苎元索直接嵌套在<»^11|1>中，如 
<head>^|Kbody > 0 这叫 /d 桌就像 M/<html>/i：；^ 的分 
支，而它们乂荇 I * 彳 d 的 m 疋桌和义冬。当然， 細个分 k 
屮的元桌还 町以有 A L ： 的下一级分支和+ / t 桌……宵.到整 
个页闹义令得到灰示。 


最后，浏览器会到达再无下一级元素的标 E ， 如印>元素 
屮的文木成 < img >; iH 这些汜卜级元桌的 feUi 称 A 叶子 
( leaves ) 。这作一来，幣个 豇向 付十 Web 浏览器来说就表 
示为-棵大树。 


Ui 之间的连接电清楚一些。 
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页®就是一组相至兵联的对象 


文档对象模型 


以下 m 轉树托 

表•子的 XHTMI。—-O 


You can visit us at the corner of 
Binary Boulevard and DOM Drive. 
Come check us out today!" 


MirbI 


< 


<html> 

<head> 

<title>Webville Tree Farm</title> 

</head> 

<body> 

<hl>Webville Tree Farm</hl> 

<p>Welcome to the Webvill Tree Farm. We # re still learning 
about CSS, so pardon our plain site. We just bought 

<a href='*http: ,/www. headf irstlabs . com/books/hfhtml/ M > 

Head First HTML with CSS &amp; XHTML</ 

a>, though, so expect great things soon .</p> 

<p>You can visit us at the corner of Binary Boulevard and DOM 
Drive. Come check us out today!</> 

</body> 

</html> 


head 



title 


“Webville Tree Farm” 


body 


,though, so expect great things soon.” 


“Welcome to the Webville Tree Farm. 

We’re still learning about CSS, so 
pardon our plain site. We just bought 
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父与子 


tliereiore np 

Dumb Questions 


l ®) : 需要用一个请求对象来编写使用 DOM 的 

JavaScript 代码吗? 

^ : 不用.洌 t 器会自动处理 DOM 树的钊建，并提供 
document 对象的所有方法，实际上，即使你极本没有编写 
JavaScript 代码，浏？ I 器也会使用 DOM 来表示你的页面. 

1®) : 既然 DOM 没有使用请求对象.那它确实是 Ajax 中 

的一部分吗？ 

^ : 这要看对谁来讲。 Ajax 实际上只是一种考忠 

Web 页面的方式，綜合了很多其他技术，可以帮助你采用 
便于使用的方式得到交互式页面„所以 DOM 确实是 Ajax 中 
的一部分。在后面的几章中会大董用到 DOM 构建交互式和 
高可用性应用 a 

1占)：那么 DOM Level 0和 DOM Level 2呢？ Internet 
Explorer 还会有麻烦吗_? 

^ : 所有现代浏充器都与 WWW 协会 （World Wide 

Web Consortium, W3C) 的 DOM 规范兼容，不过这个规 
范留了一些问題让洌 t 器设计者做决定。与其他主洗浏見 
器的设计者不同， IE 的设计者在如何构建 DO M 树方面做了 
一个与众不同的决定。不过这不算一个严重的问題，只需 
一喹工具函 ft ， 你 的代码就能处理所有主流洌見器.包括 
Internet Explorer。 


r ®) :你好像把标记中的某些部分称为“子元素”。这 
么说一个元素可以有■•子元素”，是吗？ 

^ 2 对„浏 t 器把 XHTML 组织为一棵树时，它首先 
从根元素开始，这个元素包含了所有其他元素。接下来这 
个根元素内有一个元素，如 < head >'< hody >。 这些•元素可 
以称为嵌套元素 (nested element ) ,不过在 DOM 中，我们 
称之为子元素 (child element ) • 

实际上，可以认为 DOM 树是一个家族树，完全可以套用家 
族中的说法。例如， <head> 元素是 〈 title 〉 元素的双亲 （ 
父元 素）， 大多数 <a> 元素都有孩子（子元 索）： 如链接的 
文本标签 & 

| v ^) : 你提到了一大堆新的名词。我怎么才能掌握所有 

这些新术语呢？ 

^: 没有看上去那么雎。只要心里想着一个家族树， 

就不会有问題了。多年来你一直都在使用像根、分支和叶 
之矣的词. 对于父元索和子元素，可以这烊来 考虑： 只要 
从根向下移，就是在向子元素移动。对你来说可能只有一 
个名詞是全新的，这就是“节点”，下面就来介绍这个故 
念. 
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文档对象模型 



匕 me 脱 


吋子 


縮写铽02的 Web 字典 

只是看一大堆定义有什么用呢?这是一本 Head First 书，我们希望你的大脑能活动起来， 
而不只是 光叫眼 睹矜。以下是一个 Web 字典中的儿个条 H ， 袵个定义中都少 r 一苎词。 
你的任务是适当地填空，完成各个条口。 

辛点： H 急 _ 段杉记, 如一个 x 

舍或丈本。 0> 尤棄 I 一个_ 

H 兩 “Hed Fast HTMC with CSS & 

XHTMC ” t 本 1 一个 H 


X 本内 


容的元棄（如 << w §>) 
或亡本 數轉。也彷《吋 
孑爷点。 





*Webville Tree Farm” 


“Head First HTML with CSS & XHTML” 


孩号 : 由另一 段杉记 _ 

的 fi 舍一段杉记。 丈本 'Hearf Fast 
HTML mth CSS & XHTML " 差 

< a > 无棄的 _, ci 个 

杉记中的 < P > 差 Kbody > 尤棄的 
。 也称«孑苄魚。 


• P 


驭砉：舍_的分 

何一段杉记。 < hl > At 
本 “\Ale6viUe Tree farm 

跤淳. < AtmO 差 _ 

X 棄的议凑。也彷#义 ; t 

棄或 C 笮点。 


html 


/ 分支 :分 H 尤景和内容的一 

< 个_。蚵以 “ bodf 分支 

差4树中 <心心> 尤素_的 

辦苟； t 素和丈本。 

根 尤棄： _中 

_辦奇其他无景的 

一个尤棄。在中.榷 
无景慧 •差_ 」 


M 他仿记 
尤棄 


孑尤素 

丈本 

色含 


子无素 Z 7 

详合 一个 

<Wy> 


丈枯 龙用 d 步沏 试士 

<html>^ J 
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建立你自己的 DOM 


「 ^Sharpen your pencil - 

现在来把标 id 树牢丰 id 在肭 f 里。以卜是一个 XHTML 文档，你的任务是明确 
Web 浏览器如何把这个标 ili 代码组织为一个树结构。右边给出 f 这棵树，请你填 
人它的分友以及各部分之间的 X :•系。为了有助于你着手完成这个练>1，我们巳经 
给出 f 要填入各段标记的空白框《在向別人炫耀你的 DOMW 之前一定要确保已经 
在这里的所有空白框屮填人 rHTMUAiil 中的元素或文本！ 


<html> 

<head> 

<title>Binary Tree Selection</title> 

</head> 

<body> • 

<p>Below are two binary tree options : </p> 

<div> 

Our <em>depth-first</em> trees are great for folks who 
are far away. 

</div> 

<div> 

Our <em>breadth-first</em> trees are a favorite for 
nearby neighbors. 

</div> 

<p>You can view other products in the 

<a href= ,, menu.html">Main Menu</a>. </p> 

</body> 

</html> 
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文档对象模型 



‘Below are two binary 
tree options:” 


div 







a 

P — 





^ 个 i ct 较 确 熵。卷昜 
巧钧 不稃试出乘 ， M •子 • 
^ 基一个 i 本，；£很 
fe 0 


html 


考案见 24J^» 
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节点与关系 


3 又 g : 

的 fi 问一段杉. VS , < h (> 
基丈本 '‘ WebviUe J iee 
Faim " 的议承, 〈 htmt > ! 
< 60 心>尤 景的议 g 。 也枋 
?6 #或义爷点。 



Doay 


6 


差存树中 <心心> 尤素 t 下 
辦苟 尤素和亡本。 

根兄棄： 丈枯 




中 芭含 蚵苟萁他 X 棄的 
一个无景。存 XHTML 中.根 
无棄每 I </ itmC > 。 


縮写 铽白 S 的 Web 字典 

C 以 F 足•个 Web 卞典中的儿个糸口，甸个定义屮都少 I * 一些 i « i ]。 你的任务是适、地填 

空完成各个条 F 1。 


乇孑苄点 的 
h 丈本内容 


节寿 、： H 意 ~~ 段杉记.如 一个尤 
無或亡本。0> 无棄差一个 尤棄 
琴点，不 u ^ead ^nst HTML mth CSS & 

XHTML ” 丈本差一个 丈本 笮点。 


I 


(如 <旧5>)或 

也枋#吋孑 


'Webville Tree Farm 




/ T 

广〜孩孑：由另一段杉.记 蚵忽含 
的分意一段杉记。 太本 “ 
Fast HTML mth CSS & XHTW 4 

< C > 尤素的 孑尤棄 . 这个杉记 


hi 

> 




P 




岂含其他杉记 




中 ^< P >4<6 o ^>^ 棄的孑无棄 
也枋#孑¥魚。 


分 A : 分支 差尤棄 和内容的一 
个溪合。所以 “6 _，.分友 


html 


“Head First HTML with CSS & XHTML” 
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如棄數 
6 

•1 7 













文档对象樓型 


r^harpen your pencil 

% . Wiitinn 


\ Solution 你的任务是利出 240 页 I :的 XHTML 迖立一个 DOM 树，还要國出不 N 元 

桌和义冬之 M 的迮接。你坫怎么做的？ 


trees ate ^reat tox 
toLks that ate tax a*uay 
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动态智力题，有人想试试吗？ 


T 面使阁 POM 构建一个劫态应阁 

既然已经对 DOM 有所 r 解，下尚使用这咚知识让我们的应用做-些更有意思 
的事情。 F 面来看 Webville Puzzle 公司的一个项 H 。他 f 门一皇在开发一些基干 
Web 的新游戏，现在他们的 /K 线 Fifteen Puzzle 游戏忠耍你的妍助。 



“-个 ㈣ 
&个采衫⑹•一 

5 . 


条受元锝用卢在这个 
苟裝芗的 “ Ut 厂 


► / /he^dfirjctjo j co^». oookv, 1 *>r ， 






_ 


Webc>ilh 

c Pi\ZZk$ 




\M 9 b^U 9 ?xuz^ 


我们不打 g 替换沟容，而是要移动内容 

在 Fifteen Puzzle 游戏中，"『以把一个贴块移动到空格位 R， 这样又会产屯一 
个新的空格。然后可以把另•个贴块移到这个新的空格，如此继续。总会有 
一个空格，我们的就是 U: 所有数字按啪序排列，如 T 所示。 


數字 '4 f 幵诒.相难夺一 £ 
f5 » (i 軚基一个获枝 g 安 
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文档对象模型 


fW 孖始你一 $在大谈树如何如何，现在我们义 
來玩游戏.到 菘要子 计么？所布达些鸟 Ajax 有 
什么兵系？ 


我们需要移动这些贴块……这就需要 DOM ( , 

这坫一个需要使用 DOM 的很好的例子。我们+打 P : 
改变一个衣的内宵，也小'想#换按钮卜.或 <p> 中的文 
本。相反，我们宙耍柊动表示贴块的 m 像。 

Webville Puzzles 使 ⑴ f _•个 fei 含4彳 M 列的表格来表 
示他们的盘面，所以可能需要把第3行第4列中的一 
个图像移动到第3行，第3列上的一个空格中。不能 
只是修改 <d iv > 成< t (1>的 i n ne r HTMLM 性来做到这 
—■占 

st%\ O 

我们需要具体得到一 f < inig >， 并在整个表格中移 
动这个元桌，这方面 DOMiH 好能人身 f -。 你很快 
就会 行到， 这实眯 hlH 是 Ajax 应用一迕在做的 •]»： 怙： 
动态地改变 页而。 

所有 A ] aoc$L ^ ^ 

要动态 :^响 应痄户^ 



DOW 允汾 修玖 页商 






你认为将一- t < img > 从表的一个单元格柊动 
到另一个申尤格具体需耍哪咋步骤？ 
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智力 SXHTML 


先从 XHTML 孖始 


为 f 真 iF.ffl 解 DOM 有什么帮助，下而来看 Webvme Puzzles 应用的 XHTML， 
件分析浏览器对这个 XHTML 做 M 处押 .， 然后明确如 H 使用 DOMUiUl 向实观 


我们希望的功能。 


<html xmlns= M http://www.w3.org/1999/xhtml w > 
<head> 


<title>Webville Puzzles</title> 

clink rel= M stylesheet" href="css/puzzle.css" type=’’text/css" /> 

<8cript src= M 8cripts/fifteen. js ” type= n text/javascript M X/script> 

</head> 

<body> 

<div id= w puzzle M > 

<hl id= w logo">Webvilie Puzzles</hl> 



现奋 v2 tj JavaSctipt . 

坤本增加 idtfen.js 的一 
个？ I 用 . 

Jli 这个卿本 


<div id= ,, puzzleGrid ,, > 
ctable cellspacing="0_ 
<tr> 

<td id="cellll"> 


cellpadding= f, 0 M > 


—■ 个舞。 


<img src="images/07^>ng" alt="7" width="69” height="69" /> 

</td> - 表中莕 个輩元 格部苟_个以 

<td id="celll2”> ( ^ 1 ° 

<img src="images/06.png" alt="6" width= M 69 M height=”69" /> 



</td> 

<td id= ,f celll3 H > 

<img src="images/14.png” alt= M 14 M width="69" height=”69" 
</td> 

<td id="celll4"> 

<img src= M images/ll.png" alt="ll" width= M 69" height=”69” 
</td> 


备个坫块基表辈大 
/>^ 格中的_个<洲 s>c 



</tr> 


<tr> 

<td id="cell21"> 

<img src="images/12.png" 
</td> 

<td id="cell22"> 


alt="12 M width= w 69 M height="69" /> 





<img src= ,, imaqes/empty.pnq M alt= ,, empty , ' width=_’69” height=”69" /> 
</td> 

<td id= M cell23"> 


<img src="images/05.png" alt= M 5" width=”69" height="69” /> 
</td> 

<td id=”cell24"> 


<img src= M images/13.png M 
</td> 

</tr> 

♦參參 ^^o ••• 

</table> 

</div> 

</div> 

</body> 

</html> 


alt="13" width= f, 69 ,f height="69，_ /> 


fifteen-puzzle, him I 
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文档对象模型 


c^harpen your penci 


;il 


你认为 fifteen - puzzle . html 的 DOM 树是什么样子，请画出来。 
不过，这一次不必把根元桌 放在树 的最 F 面，可以把它放在 
你希空的任何 RW : 上面、卜'面、左边或右边。 


tlierejore no 

- Dumb Questions - 

: 这个智力题里没有做任何请求，是吗？ I ®): 那么这根本不是 Ajax , 对吗? 


^ : 没有，至少现在没有。这个祛序完全在客 户端。 


^ : 哽，这又回到“什么是 Ajax” 问題上来了，如果 

你认为 Ajax 只是使用 XMLHttpRequest 做请求的应用，那 
么这就不是一个 Ajax 应用，恒是如果你认为史合适的理解 
是： Ajax 应用是具有高可用性、高_应性的 JavaScript 驱动 
应用，那么对这个应用則会另有看法，你会认为它确实是 
一个 Ajax 应用。 

不论怎徉，这个应用实际上都围绕着 DOM 的控制 …" 
DOM 对于 Ajax 编 41 会很有帮助，而不论你如何理解 Ajax 应 
用的构成 4 
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智力 S 的 DOM 树 


^Jharpen your pencil 
Solution 


你的任务足力 fiftecn-puzzlc.html 的 XHTML 姑构和内容 _ 出 
DOMW 。 以下是我 ffl 的做法 …… 我们把根元素放在左 h 角，然后 
向右 F 角展开。你的做法与此类似吗？ 
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文档对象模型 


(^harpen your pencil 


il 


继续做这个练习！这-次要求你交换以下 DOM 树结构屮的 
两个特定办点。你的任务足 s 出具体步骤。先不用 m 心方法 
名， H 写出你要做什么就》了以了。 


芍以 采用你妾望 的分何 
方式 i 出00 M 树. ••••2 
fti 係它淥蝌 5 - 


table 


■■国 




你的飪务 4 炉碥如 
何枵这 个玷扶 . 




tr 

□cz 


[ ~T~~TT——1 


img img img 


1 


i 

"~1 

1 td J 

M 


td 

H 

_T_ . 




-- 

•mg 


img 


img 


img 


. 耷 g 坫蟥 定 肩 


假设你知道点巾 r 哪个表单元格.而且还知道目料表申.元格。 
你会怎样做? 


㈣ 名 K 料 r. 


卷钱不 被用一 


5 . ' ... . . 

.. 

寸寸 \ /A IJ t ； 9 


璀轉你栌 ff 芍以耷更 
多歩鼻。 
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移动 < img > 


i^Jbarpen your pencil - 

> ‘ Solution 你的任务足写出所要采取的步骤。假设你知道点击 丫哪 个表 

笮元格，另外还知道口标表申.元格，你会怎样做？ 


O 得到所选表单元格的子元素。 

为此 "f 以使丨 H get Element sByTagName (> ， 不过我 ft I知道表示所点 
* 贴块的 <img>iH 是所选单元格的了-元素，所以可以利川 DOM 来得 


到这个了-元素。 


輩无咚.的以 ii I 我 
们的起彖。 



判用 DOM 获驳婀这 <t<0> 的 
+无景可以得列这个 < i m j > 


© 得到目标表单元格的子元素， 

一旦开始交换，区別所选< 10 ^>弓目标 < img > 会更 阐难， 所以在开始 
移 动元索 之前，还要得到目杯 < td ：^< img^j -个引用。 



f si 个（ 
* 的-个引用。 
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0 将所点击的 < img > 增加为新亘1 表单元格的一个子元素。 

需要把所选单元格中的<：111^>移动到目标单元格。所以只需将所点击 
的 < img > 增加到目标 < td > 的子元素列表中。 










改变还是移动？ 



•得剴 第-个 < iwg > 的 src 展性，榑它乌 某二令 
< iwg > 的 src 厲性交 M 。 P , tS 增加一个称 封字符 
$. 你 ftt 大功 t 成？。 没笮 POM . 浚布新语法。 
达祥不 是很好 蚂？ 


你希望改变一个元素还是移动一个元素？这有很大区 
别。 


你当然可以编写代码简单地交换两 f < img > src 域性的 


值，如下所示。 

var tmp = selectedlmage.src; 
selectedlmage^src = destinationlmage.src; 

destinationImage.src = tmp; 


痂系个® (象的 
s * c 羼往2 ■本 


这样做的问题 在千： 实际上你只是在修改图像的属性 ，^ 
而不足在页而上移动这些图像。 


那么这有什么区別呢？想想看，每个图像的其他域性 
呢？还记得每个 < img ：^ 有一个 alt 属性吧？ 


<img src="images/14.png" alt="14 •’ 
width="69" height="69" /> 




叫 dth 知 


如果你改变了 src 诚性，只是修改了 < img > 的-•部分，其 
余的内容仍然没有改变……这样一来， alt 属性就会与图 
像不一致！ 


|51 alt = 

"14" ^ 

1 width 

= ，， 69.，| 

height 

= ”69" U 



你要做的是交换整个 < img > 对象。这样 >， )^-^ i(tUe 
毎个 < img > 会保抟其属性不变。图像没有变，而 ^ 

是该 < img >^ DOM 树中（相应地在页面的可 
视化表 示中） 的位罝发生了变化。 
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文档对象模型 



JavaScript^ DO JV* 贴 

你巳经明确 r 交换两个贴块需要做什么，现在把这些一般性步骤转换 
成具体的代码。以下 是一个 新函数 swapTiles () 的 骨架， 不过所有代码 
都掉到地 t f ……你能肴出如何完成这个函数吗？ 
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parentNode 是只读的 



JavaScript DOM 赇考寡 

现在要把 250 贞上那 些-般 性步睐转换成具体的代码。以下是一个新函 
数 swapTilesO 的骨架，你的任务是适当地组织各部分代码，构成一个 
可用的函数。 


function SWapTiles ( — ^el^ctedCellJ^ destinationcell { 


^electedliMge^^ = |^^iectedCe]^^ 聲 ； 


destinationlmage 


selectedCell 


destinationCell 


firstChild 




appendChild^ ( destinationlmage ； 


用. 


…… ii 含劣威薄 
个®偉的 交減。 


^stinationcell ^ | a PPendChild 1 ( selectedlmage ; 


不是笮 X 无素吗？难道对子每个无素成节点没 
布一令 parentA 性码？我们玎认挖 sekctedlmage 的 
parent 禺性设 S 为 destinationCell . 反过采对 
destinationlmage 是一样 ( 将其 parent 属性设 S 为 
selectedCell ) 。 


0 


每个节点确实都有一个 parentNode 属性……但是这个 
parentNode 属性 是只读的 。 

DOM 树中的每个节点一包括元素、文本甚至属性—— 
都有一个名为 “ parentNode ” 的厲性。通过这个域性可 
以得到当前节点的父节点。例如，一个表单元格中的 
< img > m 父节点就是包含这个图像的 < td >。 

但是在 DOM 中这只是一个只读属性，所以尽管可以得 
到一个节点的父节点，但是无法设 置其父 节点。相反， 
必须使用 appendChild 0之类的方法。 
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文档对象横型 


appewdChildO 向节点 增加 一令新的手节点 


appendChild ㈠ 方法用于向一个元 4(: 增加一个新的+节点。所以如果运行 
destinationCell.appendChi Id (selected Image ), 就会将 selected I mage 节 
点增加到 destinationCell 原有的子节点列表中。 __ 

5 个 ^ 1 



desfmaflo 糾，。_ ❻ ® ” 魚 


img 





J 




rz —^^ 

Lm 

_ ■— J 

imgj 






destinationCell.appendChild(selectedlmage) 

新的孑节点会 . I ) 动拇 冇一个新的父节点 

为一个办点指定一个新的子节点时，这个新子节点的 parentNode 属性会自动 
电新， 所以尽管无法 S 接改变 parentNode 厲性，恨是可以移动一个节点，从 
而让 DOM 和浏览器为你处理这些厲性的改变。 

tliei 


ypem / CWrfO 枓爷堯如到义 
无#子爷点列表的末4 


|3): 这么说我可以从 

JavaScript 中自动地使用所有这些 
DOM 方法了？ 

^ : 基本上是这蛘。但有几个例 
卟，后面就会试到，不过大多 It 情;兄 
下，你编写的任何 JavaScript 代码中都 
会使用 DOM ， 

: DOM 树由节点组成，比如元 

素和文本，对吗？ 

^ : 没错，佴不要忘记属性，节 

点实际上可以是能够出现在页面上的 
任何东西，不过大多数常見节点往往 
就是元素，美性和文本。 


therefore no 

Dumb Questions 


R : 一个节点有一个父节点和一 

些子节点，对吗？ 

^:所有节点都有父节点，但是 
并非所有节点都有子节点。文本和属 
性节点就没有子节点，另外不包含内 
容的空元索也没有子节点。 

| v ^) :根元索的父节点是 什么？ 

: document 对象， 正因如此， 

可以使用 document 对象查找 Web 页面上 
的任何元素^ 

: 还有没有其他方法像 

appendChild () 那样增加子节点？ 


^ : 当然有。下一幸就会介绍这 

些■方法 • 

:为什么这比直接改变 
< img > Wsrc 厲性更好？ 

^: 因为你不想修改所显示的图 
像.你只是想把这个图像移动到一个 
新的单元格，如果希望图像位置保持 
不动，保留其 alt 标签以及 height 和 
title , 那么可以改变 src 属性 0 (S 是 
我们只是想移动这个图像，所以这里 
使用了 DOM « 
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名还是 id ? 


玎认 桉名或说定位无素 

如果把豇向 _ 考虑成 DOM 树中 W 点的一个集合， getElementByldO 和 
getElementsByTagName () 等方法就会很有意义。 

通过使 / T 1 节点的 id , 可以用 getElementByldO 査找树中任意位置的特定 
节点。 getElementsByTagName() 则根据节点的标记名迕找树屮所存相 
应的元素。 


html 


title 


“Webville Puzzles ” 


T 


head -f link 


script 
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文档对象模型 



编写 initPageO 函数的代码。需要确保每次点击一个表单元格时会运行一个名为 
tileClickO 的事件处理程序。我们后面将编写 tileClickO 的代码，不过，你可能希望先用 
alertO 语句建立一个测试版本，在翻开下一饭之前确保你的代码能正常 r 作。 


争 答策见页。 


这儿个问题可以让你的左脑开动起来。翻开下一页之前先回 
答这里的各个问题……完成后，你可能还希望再仔细检査上 
面完成的 initPageO 代码。 

1. 移动贴块的亊件处理程序应该放在表单元格 h 还是该笮元 
格中的图像上？ 

| 表中.元格 (< td >) =图像 （< img >) 

2. 你为什么作出以上选择？ . 


^ I^arpen your pencil 


如何确定是否点击了一个空的贴块？ 


4 


如 H 确定一个贴块的目标单元格？ 


_答案见 261 页。 
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运行测试 



你的任务是编写一个 initPageO 函数，为 Fifteen Puzzle 设置事件处理程序。你的答案是 
什么？以下是我们的做法。 


IOH 


记存震把 巧 *() 蚤數後至 

.. - , .. - window.onbaii 搴件。 

window.onload = mitPage ; 

㈣ ##其中的 

function initPageO { 表和鞏 无塔 # 联事 

var table = document. getElementByld (''puzzleGrid ”） ； — ^ 

var cells = table.getElementsByTagName (''td M ) ; ^ 

for (var i=0; i<cells.length; i++) { | 饵 f.)(i 个表 中的莕 一个〈“〉」 

var cell = cells [i]; ^ 的子《个輩无格 . 

cell.onclick = tileClick; __ 

…… ^ ultChchO ^ tl ) 
cmc“cfc 攀 4 3 


} 


) 



function tileClick() 

alert (''You clicked me ! w ); 

} 


戧達 i 5 —个阇 輩的蘑 4 
赴理疗 4 乘进行涮试。 



运行测试 


将 initPage ()、 tileClick () 和 swapTiles () 增加到一个名为 fifteen . js 的脚本中。确保在你的 
XHTML 中引用这个文件，试着运行这个 Fifteen Puzzle 应用，看看各个表单元格上的 
事件处理程序表现如何。 

A/\/V - 


々黍 % ^ > r*«4lf^rsnM» v ^ 1 ^ 浐 
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表单元格访谈 

本周话题： 

与一个新父元素的会谈 


Head First ： < td >, 我听说你是一个新的父元素，是吗？ 

< td >： 没错。我是让一个小可爱 < img > 自己办到的。 

Head First ： 这么说，它是你的第一个孩子了？ 

< td > :嗯， 要看你问谁了。有些浏览器说这个我的第 
一个孩子，但另外一些却认为我已经有很多空的子节点。 

Head First ： 空的子节点？ 

< td >: 对。你知道的，像空格、回车之类的。不用操心这 
些。 

Head First ： 不用操心？这听起来很 严東呀 ……你可能有多 
个子节点，这难道不是个大问题吗？ 

< td >： 别紧张，这要看如何来处理。大多数人只是忽略所有 
这些空节点来得到我的小 < img >。 

Head First ： 这太让人糊涂了。你觉得我们的听众真的能理解 
你讲的是什么意思吗？ 

< td >： 就算他们现在不知道，我敢打赌很快他们就会明白 
的。等着瞧吧。 

Head First : 嗯……是这样……我猜想……我猜想现在只能 
如此了。希望我们很快就能搞清楚，听众们请別走开，稍后 
回来。 



— Dumb Questions 

1^) : 为什么 puzzleGrid id 放在一个 

< div > 上而不是在 < table > 本身？ 

^ : DOM Level 2浏見器和 〖ntemel 
Explorer 处理表的方式完全不同，对表应用 
CSS 样式的方式也是迥异的，要让一个包含 
表格的页面在 IE 和 Firefox 、 Safari 等等别見 
器上看上去一样，最容易的方法就是对包 
围 < table > W < div > 指定样式，而不是对 
<七3131€>本身指定样式。 

因为对有 id 的元素指定样式最为容易，所 
以我们 把 puzzleGrid id 放在希望增加样 火的 
< div > 1：, 也就是包围 < table >^ J < div >。 

l 1 ^) : 这就是你使用 getElementByld () 来 
查找这 t < div > 而不是具体 < table >& 原因， 
是吗？ 

: 对。也可以在 < table > Ji 加一个 id ， 

但是没有这个必要 a puzzleGrid < div > 中只 
有我们想要的表，其中包含所有那些可点击 
的单元格，所以只是查找 < div > 然后查找其 
中的所有<1<1>会更容易一些。 



- 

你觉得在前而的访谈 *< td > 所说的是什么意思？有 
没有一些已经编写或将要编写的函数可能需要考虑 
< td > 提到的那些'“空 （ nothing ) ”子节点呢？ 


你现在的位罝 > 259 


Download at http://www.pin5i.com/ 








空贴块在哪里？ 


能移动所点击的贴块喁？ 

既然 ll 经冇了基本结构，卜 n 完成这个竹力题叫用。山 r 贴块只能柊 
动到一个空的方格中，首先要确定的足“空 方格 在哪里”。 

对于所点击的任何贴块,可以在6个 " r 能的位 s h 。 假设用户点击以下 
盘面上的“10” 贴块。 
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文档对象模型 


这几个 W 题可以 lh 你的左 眛开动 起来。翻开下一页之前先 M 
答这里的各个问题……完成后,你可能还希望再仔细检査 
上面完成的 initPageO 代奶。 

1. 移动贴块的事件处理程序应该放在表单元格上还是该单元 


^Sharpen your pencil 
Solution 



如 何确定 垃否点占了一个空的贴块? 


Joe ： 为什么？用户点击的是 “7”，又不是第3行上的第2个贴块。 

Frank : 嗯，他们也在点击图像所在的表单元格。 

Jill ： 那么，假设把事件处理程序放在图像上，然后，用户点击这个图像 


Joe ： 那又怎样？ 

Frank ： 我们打算使用 DOM 得出空方格 Lj 所点击阁像的相对位对吧？ 

Joe ： 我想是这样。这与图像上的亨件处理程序有什么关系呢？ 

Frank ： 如果事件处理程序放在图像上，我们就得一直获取图像的父元素。如果事件处理程序仵单 
元格上， 就可以 避免这额外的一步，可以只足检査所 点山中 .元格周围的中•元格。 

Jill ： 对了!这就不需要在事件处理程序中移到图像的父单元格1\ 

Joe ： 所有这些都只是为了避免一行代叭？只是要求得到图像的父元桌而已？ 

Jill ： 对干每个点击事件都能避免这一行代叽。可能会有成 百上千 次点击…… 姓至成 千卜.万次！你做 
过这种智力题吗？你知逬的，这确实要花一些时间。 

Joe : 哦。我还是不清楚开始时怎样找到空方格…… 
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家族全体 

玎认利 用宗族兵 % 在 POM 树中移动 

假设你想找出一个 <img> 的父元素，或者想得到表格中 F —个 < td > m 引用。 DOM 树是有 
关联性的，可以使用 DOM 的家族类型属性在树中移动。 

parentNode 可以在树中 h 移， childNodes 可以提供一个元素的子节点，还可以利用 
nextSibling 和 previousSibling 在节点之间移动。另外可以利用 firstChild 和 
lastChild 得到一个元桌的第一个子冇点和敁后一个子节点。请看以下说明。 



next 

唏夺达®下一个芊魚。 


廣 ㈣ 
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文档对象模型 


^j^rpen your pencil 


以下是一个 DOM 树和一些 JavaScript 语句 a 在 JavaScript 中，各个 
字母分別是表示 DOM 树中相应节点的变量。你能知追各个语句指 
示哪个节点吗？ 


a 




UJ 

■ 

■ b | 

d - 

_ c 

一 W=”y") 

. . 




f 


document.getElementByld("y"); 
g.parent; 

document.getElementByld("y") .nextSibling; 
a.firstChild; 

c. parent.parent; 

d. firstChild.lastChild; 
c.previousSibling; 
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使用有意义的元素 id! 


^Jharpen your pencil 
‘ Solution 


a 


以下是一个 DOM 树和一技 JavaScript 语句。在 JavaScript 中， 
各个字母分別足丧示 DOM 树中相应节点的变镟。你能知道 
各个语句指 示哪个节点吗？ 

id= " x Q 


f 








「 

b 





d 

LJ 


L 





9 



c 







_ 

e 




— ^ id="y") 


document.getElementByld(”y ”）； 
g.parent; 

document.getElementByld("y") .nextSibling; 
a.firstChild; 
c.parent.parent; 


c 




(i 个空比校眺 * 记伎. 

黄的 《 ^ M 中 / 

沪的嘀 4 ， 由子 c 下乐沒笱兄莽矽 

d. firstChild. lastChild; 译以 J 咖 - 个 ”“《 0 



Si. 


c.previousSibling; 
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达些作为无素名太 If 苞？。到孩为什么 S 
用字母來命名你的节点嘬？ 


要为元素和 id 属性使用描述性的名字。 

编 WXHTML 时，允素名 Ll 经很清楚 T。 没有人会混 
m<div>S<img> 是什么意思。不过还需要使用有描 
述性的 itl， 如 “background” ； “puzzleGrid ” 。你无 
法知道什么时候代码中会出现这些 id , 要让你的代码 
更蛣干现解……否则只会使代码更难读馑。 

元桌名和 id 越沾楚，对于你和其他程序 M 来说代码也 
就越明了。 


Download at http://www.pin5i.com/ 












文档对象模型 

Sharpen your pencil 

< Solution 对丁士 :iw • 块的付 : 胃 if 心两种可能性。 

可能的情况吗 ? 




必铱 f i 保坫螭不含歧苒他外空玷咕 
笆®:如菜砝食如此 . 

高不戗移幼。 


点击的1 空方 格。 .. 

赛疼枰飧承 .7,.. f . 會.移动货传紐,. 


ci 也不含專致 i 淖发芏。 
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移动貼块 



现在来违立其余的 Fifteen Puzzle 代码。下面是你的 作业。 


O 编写一个061115巳01口以()函数。 

给定一个表示<^01>的节点，得出该单元格中的图像是否是空图像。为 

了对你有帮助， F 面给出空单元格的 XHTML 。 

<td id="cell22"> 

<img src="images/empty.png" alt="empty" width="69" height="69" /> 
</td> 

以下是这个函数的一部分，你可以以此作为起点。 


function celllsEmpty(cell) 
var image =. 

if (.. 

return true; 
else 

return false; 


ceU^.^ « 器 DOM 树中表•子 
<td>^^€. a 


个 


O 在 tileClickO 事件处理程序中查找空单元格。 

F 面开始建立 tileClickU ，这个事件处理程序要关联到各个表单元格。 
首先，需要检査空单元格。如果所点*单元格为空，则显示一个消息指 
示用户需要点击一个不同的贴块。 

function tileClick () { 

if (celllsEmpty (.) ) { 

alert ("Please click on a numbered tile .”）； 
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Q 得出所点击的行和列。 

以下是这个智力题中一纟II单元格的 XHTML。 

<td id= M celll3 M > 

<img src= f, images/14 .png" alt="14" width="69 M height="69" /> 
</td> 

<td id="celll4"> 

<img src= M images/ll .png” alt=’_ll" width=”69" height="69" /> 
</td> 

</tr> 

<tr> 

<td id="cell21"> 

<img src= f, images/12 .png" alt="12" width= n 69 H height="69 H /> 
</td> 

— etc 


给定这个 XHTML (以及 246 豇 h 其余的 XHTML ) ，你能知逬如何得到 
所点占貼块所住的行和列吗？ 

var currentRow = this •.•. ; ^ •用一 •人 

var currentCol = this . . ; hvflSctipt 的 position) 

cows ^one wiUT 

Q 完成 tileClickO 事件处理程序。 ^>»At (2) 含达闭。 

一旦确保没有点击空貼块，而凡得到了当前行和列，所需的所有信息就 
已经准备就绪。你的任务是处理空方格所在位置的其余5 种町 能的情况。 

如果可以，则将所选贴块与空方格交换。 

酋先，以下给出检査所选贴块上方位晋的代码。 ， 

c 右不在票 将 i 本耗減衿—神 & 

* \ 1 a ix. r. // Check above ^ 

1 •’ 十 • 银 ;- ^ if (currentRow > 1) ( 穹格式。 f 气鸟另 - 个字搿華相 ㈣ • 

方 ^ var testRow = Number (currentRow) - _ __ —- 

var testCellld = "cell" ♦ testRow + currentCol; * ° 

i 方鞏无格的 var testCell = document.getElementByld(testCellld); 

o ? cell 0 ' if < cellIsEm pty ( testCell >) { g 得利* 试 

4( c « tje«tRow -0. swapTiles (this, testCell); 輩 ; t 格 . 

return; …… 

,' 如羃交幻桃《务宄成！ \\ $ 方格 …… 

••…然肩 i 痴劣窃鞏无格 
•' 和空方格 

tileClickO 的其余代码由你来完成。所要处押的各种不 M 可 
能怙况可以参考265豇。祝你好运！ 
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移动了吗？ 



ton ? Excise 

你的任务是达 telUsEmpty _ 数，贩完成 clickTileO 轉处理程序。你能得出答 
案 W ? 以 F 是我们的做法。 



function tileClick () { 

if (celllsEmpty( this )) 

alert ("Please click on a numbered tile. f, ) 
return; 

} 如 |L ♦.壬的基■空坫炔. 

一 tf ii ©。 


var currentRow = this. 
var currentCol = this. 


=心 0 中 

象. 私基 書 



// Check above 
if (currentRow > 1)( 

var testRow = Number(currentRow) - 1; 
var testCellld = "cell •’ + testRow + currentCol; 
var testCell = document.getElementByld(testCellld); 
if (celllsEmpty(testCell)) { 
swapTiles(this, testCell); 
return; 

} 
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文档对象棋型 


味保 不杏4名一行 I ： a 

// Check below 
if (currentRow < 4)( 

var testRow = Number(currentRow) + 1; 
var testCellId = "cell” + testRow + currentCol/ 
var testCell = document.getElementById(testCellld); 
if (celllsEmpty (testCell) ) { 如菜 0 杉 # 无格碎 $ W 完咸 ― 



利下 
辈无格: 


H 同一 的 


swapTiles(this, 
return ; 


testCell) 




〆 


现 ㈠ 赛薄达. 鉍係不在 
ft 在 f ) i 。 


// Check to the left 
if (currentCol > 1) { 

var testCol = Number(currentCol) 
var testCellld = M cell" + currentRow + testCol; 
var testCell = document.getElementById(testCellld); 
if (celllsEmpty(testCell)) { 

swapTiles(this, testCell); 
return; 






查看 ii 个辈光格及否幻空 a 
如粟則 宄威交 痂冉达 


) 




// Check to the right 
if (currentCol < 4} { 

var testCol = Number(currentCol) + 1; 
var testCellld = "cell” + currentRow + testCol; 
var testCell = document.getElementById(testCellld); 
if (celllsEmpty(testCell) ) { 

swapTiles(this, testCell); 
return; 

) 如粟 t •兑垆鰣 i 壬貼缺不 

} 婷空.系£不务交方路和郃》 


// The clicked-on cell is locked 


alert ("Please click a tile next to an empty cell 
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DOM 允许移动 


r ^ i :哇呜，这么多代码 . 我得全 
部理解吗？ 

^:确实有很多代码，不过如果 
你一步一步跟过来，所有这痊对你来 
说应该不雎理斛，这里并没有太多新 
东西.不过比起前面的工作来说，确 
实有更多 DOM 和定位的内容, 

: 所有这些都是 DOM 代码吗？ 

^ : 嗯，实际上并没有 I ) OM 代码 
之类的东西。这姿都是 JavaScript 代码, 
其中大量使用了 DOM u 

那么哪些部分使用了 


只要是使用一个属性在 
D O M 树中移动，就是在以某种 
方式使用 DOM. 所以 firsiChild 和 
prevituisSibling 是 DOM 展性。但是使 
用 gelElementByIil() 的代码也是在使用 
DOM , 因为这是 document 对象的一个 
爲性 • document 是浏見器 DOM 树的顶 
层对象„ 

DOM 对子奔成 
页商上节点的定 
位和移动弗饼 
是铱妗的工具^ 


DOM 呢? 

答： 


there 1 are no o 

Dumb QiiestiQns 


R : 你假设表单元格的 id 中包含 

行和列，这样假设安全吗？ 

V ： 如策你能涞我们一样自己 
控制 XHTML , 这就是安全的。由 
于 Webvme Puzzles 公司是这蛘建立 
XHTML 的，象单元格中包含这些能提 
供很大方便的 id , 所以我们可以根据 
其 id 得出一个单元格的位如果你 
建立的 XHTML 不同，可能需要得出单 
元格相对于其他单元格扣行的位 E . 

: 也可以用 DOM 来做到这一 

点，对吗？ 


^: 到目前为止.我们只是完成 

了 DOM 中节点的 移动. 下一章中，我 
们还会学习如何创建新节点，以及如 
何动态地将节点增加到树中。 

1^ : 再来看代码……表单元格的 
firstChild 总是单元格中的图 像吗？ 

I 不错，日前 cell 〖 sEmpty ( >是 
这徉编写的，你能想到哪神情况下图 
像可 能不是表单元格的芊一个子元素？ 

r ^) :如果图像不是表单元格的第 
一个子元素，那就麻烦了，是不是？ 


^ 2 答对了.你很可能会使用某 
种计 ft 器以及 previousSibling 来 
得出有多少< t d > ， 而 iL 需要 
parent Node 和类似的铢性来查看在 
哪一行上。 


^: 那当然。 

: 嗯，2 5 4页上的 

swapTilesO 不也是这么做的吗_?那里 
也假设图像是 firstChild , 对不对？ 


:这 么说， 这里有关 DOM 的内 ^ • 完全正确.所以那个攸设是 
容可能相当复杂，对不对？ 不是也有问题？ 


^ : 确实，也许很快就变得非常 

复杂。不过大？ ft 情况下，可能只需 
要达到 Fifteen Puzzle 这种复杂权度„ 
实际上，只使用前面学到的属性，你 
就差不多是半个 DOM 行家了！ 




到底是谁在问问题呀? 


答 : 

fifteen 


可能我们应该測试一下 
puzzle . 看看会犮生什么。 


问： 


半个？那另一半呢? 
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运行测试 


打开 fifteen . js 的代码，增加 celllsEmpty (> 和 tileClick () 的代码。确保 initPage () 和 
swapTilesO 也正常工作。加载页面，这个智力题应用能正常运行吗？ 




WebinUc Puzzles 


一“个 
•:务 » 


不论电 ■£ 來个 坫祕， 



以 F 是 fifteen puzzle Web 面屮 各衣申-元 格的 X HTM L 。 

<td id="cell22"> 

<img src= M images/empty.png'* alt= M empty M width=”69" height="69" /> 

</td> 

这个 XHTML 与以卜片段有什么区别吗 ？ 

<td id="cell22"><img src= M images/empt y.png' 1 alt=.’empty" width= M 69" height="69" /></td> 

ff 细査肴 swapTilesO 和 celllsEmptyO 。 你能 # 出以 h 两个 XHTML 片段屮差别有关的 
• 个问睡吗 ? 



ExettciSe 
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空格呢？ 


POM 树包 tWeb 克面 上所布沟容 的 
相应节点 


人多数 XHTML 页面不会从开始<111：011>到结束</^1^1>把毎一个元 

素都放在间一行 h , 这样阅读起来很困难 # 相反,页面中会有大量 

空格. tab 制表符和 M 车符（有时你为“换行符 ”）。 • 

^r- & 1 用矿耷残硪行搿来 分铒 

〈table cellspacing="0" cellpadding="0"> <-J ^ ®• 巧心 更务子 K 

^ ^_,<tr><J ] 

u-u-j<td id="cellll"> .Vj 

u_ii— n-i<img src= M images/07 .png" alt="7" width="69" height="69" /> <J 


2 车一杳空 
咚扣 $•) 表符 
卖 * 嫉进。 



t_.Lj<td id= ,, celll2 ,, ><-J 
i_ii_»i_i<img src="images/06.png" 

i-u-Ktd id= ,, celll3"><J 


1 _ J t_4i-j<img src="images/14 .png" 

L-i^<td id= ,, celll4">^J 

u_»»—n-»<img src= M images/ll .png" 

*-»•-»</ td><-^ 


</tr> <-* 
... etc 
</table><-* 


alt="6" width="69 n height="69" /> <-J 

alt="14" width= M 69 n height="69" /> 
a lt=”ll" width= n 69 M height= ,, 69" /> <J 


迖些空格也是节点 

¥ 讶这些空格对 你柬说 是不可见的， m 是浏览器会试阁叫确如何对 
它们进 行处押。通常这些空格会表示为 DOMW 中的文本节点。所以 
一个 <t a ble> 节点除了你所期喏的所有 <tr> 子节点外，还可能有大 
欤 fci 含空格的文本节点。 

m 糕的是， 片+是 所有浏览器都采用同样的方式进行处理。所以有 
时你会得到空文本节点， m 有时乂没有。要由你来考虑这呰文本节 
点， m 是不能假设总有这样一苎 V /点。听卜.去有呰糊涂，是不是？ 


匆贳芻处琪空令符 
时存在—些>—黪 
性。乐远>要#诶 
—个匆览粽昱佘忽昤 
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一 个浏览器可能为你的页面创建如下的一个 DOM 树。 


女档对象樓型 


S1I 

f 斿朱 象杀。 



f 4莪 r 逑 if 七莛搿#赴璞的笮魚。沒苟空仝 
7 - . c ■夯 表行扣 輩无格 以及 ii 哒輩元格中的®蟑 


另一个浏览器可以为同样的 XHTML 创建一个不同的 
DOM 树。 


table 


說$ 4 , 

'•"• o 



— 

#text 

— 

tr 



i— #text 
td 一 」 #text I 


戌 < m $ > 箱后 <5 H 今 .1 
f “个 <“>辛-个空佥“七 

样后4<本的 <**«$> 爷魚 .. 
••燃 后 4另一个空爸全本 


- I 

麵 td 一 _I 

飞 -* I 


#text 




img 


#text 




#text 


— img 

- 'Utext] 
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文本节点 


文本节点的 ModeNawe 是 “Mext” 

义本节点总和 -node Name ('4^., % “# text ” ，所以 " f 以通过检丧 

nodeName 来得出一个 Ifi •点处否足文本界点。 



w\e 


犹 


swapTilesO 和 cellist 晰 pty () 不考虑空白节点 

我 tf ] 的代码中所存在的问题是，艽中假设衣单 X 格中的 < ini g> 就是 
< td > 的第一 个了节 点。 


function swapTiles(selectedCell, destinationCell) 

selectedlmage = selectedCell•firstChild; ^ — - - 

destinationImage = destinationCell.firstChild; 
selectedCell.appendChild(destinationlmage); 
destinationCell.appendChild(selectedlmage); 




< S 基如粟 < d > 栌藥一个 
哫？ 



#text 

f 




•mg 



td 



#text 
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必须考虑会在 DOM 树中创违空白节点的浏览器。看 
看你能不能完成 F 面的填空，解决以 TswapTiles (> 和 
celllsEmptyO 函数的问题。 

function swapTiles(selectedCell f destinationCell) { 
selectedlmaqe = selectedCell.firstChild; 

while (selectedlmage._ == _) { 

selectedlmage = selectedlmage._; 

} 

destinationlmage = destinationCell.firstChild; 

while (destinationlmage._ == _) { 

destinationlmage = destinationlmage._; 

} 

selectedCell.appendChild(destinationlmage); 
destinationCell.appendChild(selectedlmage); 


cc^harpen your pencil 


function celllsEmpty(cell) { 
var image = cell.firstChild; 

while (image._ == 

image = image._ 

) 


if (image.alt == empty) 
return true; 
else 

return false; 


tliereiore no 

Dumb Questions 


I 1 ?) : 如果文本节点的 nodeName 总是 “# text” ， 该怎 

样得到这个节点中的文本呢？ 

^； 文本节点将其表示的文本存储在一个名为 
nodeValue 的 A 性中。所以对于一个空白节点，其 
nodeValue 将是 ”” （一个 空值） 或者可能是 ”” （两个空格）。 


1^) 2 难道不能査看文本节点的 nodeValue 是否是空白 

符吗？ 

I 在 fifteen puzzle 中的表单元格中，没有必要检查 
nodeValue 。 因为我们只关 c<img> 节点，并不关心其他内 
容，所以可以忽略所有文本节点 . 
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忽略文本节点 （有 时) 


i^arpen your pen< 
Solutio 


ncil 
n 


你能想出如何在 celllsEmptyO 和 swapTilesO 中忽略空白文本 
节点吗? 


function swapTiles(selectedCell, destinationCell) 
selectedlmage = selectedCell.firstChild; 

nodeMame == 


while (selectedlmage,' 


selectedlmage = selectedlmage. nextSiblivig 


> 


如菜择！_)一个丈本衫 * 9 移利下一 


destinationImage 
while (destinationImage 


destinationCell.firstChild; 

nodeName == **text_ 


destinationlmage = destinationlmage. HCXtSibllwg ; ft # 爰錶荥 5 


} 


selectedCell.appendChild(destinationlmage); 
destinationCell.appendChild(selectedlmage); 


function celllsEmpty(cell) { 
var image = cell.firstChild; 
while (image. wodeName _*fext’ 


/ 


辦苟 ii 3 神作况布續用同样的荃本 携式. 
只•前笮点基 i 本爷点.杖棉到下一 
个 H 


〆 




image = image. ncxtSib[iHg _； 


if (image.alt =: 

return true; 
else 

return false; 


"empty •” 
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tli 行测试 - 

更新你的 swapTiles() 和 celllsEmpty()， 再来试试这个智力题应用 现在应该能移动贴 

块而不会有任何问题1 



现存玷峭軲正常工0 
夯空仝得.洌•赶器邾 


c Pi\ZZk% 


Muzzles 


7 


； H'T1 

1:) 

_ 


K 

flO 

'1 ! 15 

1 

■ ■ 

丄 

9 H 

mmd^m 
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贏才是硬道理 


我嬴 5 吗？我嬴？码 ? 


现在只剩下编写一个函数来确定什么时候玩家取•:。每次交换两个贴块时, 
4以检奔这个函数来看盘面上是否已经按 止确的 顺序排列。如果是，则灰明 
玩家解出 f 这个智力题。 


以卜‘是一个 puzzlelsCompleteO 函数，它使用各个阁像名来检奔足否所 

有贴块都按正确的顺序排列。 

function puzzlelsComplete() { 


芒光.珥到表格中的 
蚵 耷 <1W$> 杉 • 记。 




var tiles = document .getElementBylcK'^uzzleGrid' 1 ) .getElementsByTagName( ,, img M ); 


var tileOrder = 


达代理备个 坫蛾® 罈 

i2 

for (var i=0; i<tiles.length; i++> { 




var num = tiles[i].src.substr (-6,2); 我们只 S 到數字郝分 . ^ Vj, Ik 

^ - _6 的沄 f # 诒 S 42 个字 

if (num != "ty") 戧 f ] 不兵 <0 • 空@ 嘩 . 龙将萁忽略 . © >fi 的子空 

ffi 俅执行 *« 6 * 打 0 达 ® 的 ; f 个字符 4 'ty" . cjlr/ 
tileOrder += num; S. S' S. "ty" # 将其左略。 


1 如粟不 4 空樣妁 把數穹 （ M 穹搿毐）坩加 f . 则 .。 

if (tileOrder == "010203040506070809101112131415”） 


return true; 
return false; 




如戛數掌 s 炫相的埽序斯列 


个智力联軚完嘁 5 9 


tlierejarc no 

Dumb Questions 


l ^) : substr (-6, 2)? 我不明白这做 
什么用？ 

^ :『5数表示从率的末毛开始向前 
彀。由于 “02. png ” 共有6个字符，我们 
希望从这个字符串的末毛向前数6个字符。 
然后，希望得到这个子申的2个字符，要 
得到 “02” 或“丨5”，因此需要使用 


substr(-6,2 )。 

: 与散列串比较的那一大堆奇 

怪的数到底是什么？ 

^ : 这只是智/；題中的每一个抆 

字，按觸序分别为： 01,然后是02,然 
后是03，依此类推，直到最后的15。由 
于散列串表示贴块的顺序.所以我们将 


散列事与表示 8 i 块正确喊序的一个串进 
行比较 • 

: 但是空貼块呢 •.> 

^ : 空貼块在哪里都没有关系， 

只要保证軚字遵摊正确的顺序。正是因 
为这个原因，我们去掉了空贴块，不作 
为散列串的一部分。 
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文档对象横型 


不过说正经的……我嬴？码？ 

Webville Puzzles 公 W) 还在 K:CSS 中增加了一个特殊的类来 M 示 
获 (H •: 动 l«i 。 这个类名为 “win” ，解出这个转力题时，吋以将 
id 为 “puzzlcGrid ” 的 <div> 设置 为使 ) H 这个类显， 动 ! wj 。 

这说明， U 忠在袵次交换贴块时检奔这个 tV 力题坫否解出。 


function swapTiles(selectedCell, destinationCel1) { 
selectedlmage = selectedCell.firstChild; 
while (selectedlmage.nodeName == #text) { 
selectedlmage = selectedlmage.nextSibling; 

) 

destinationImage = destinationCell•firstChild; 
while (destinationlmage.nodeName == #text) { 

destinationImage == destinationlmage.nextSibling; 


selectedCell.appendChild(destinationlmage); 
destinationCell.appendChild(selectedlmage); 


pm 坫桃索"委妒 
择吝 45 彖贫笮力逋。 


if (puzzlelsCofnplete ()) { 

document• getElementByld ( ,v puzzleGrid v, ) . className 

} 


"win"/ 







运行测试 


需要为 JavaScript 增加 puzzlelsComplete () 函数，并更新 swapTiles ()。 然后尝试运行这个应 
用。不过你必须解出这个智力题才能看到获胜动画。 


祝你好运! 
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DOM 是个工具 




DOM 只是一个工具，你不会一直都用它……有 
时即使用到可能也不会使用 过多。 

你编笱的应用如米人部分都蛙与 DOM 扣关的代叭， 

这是很少见的。但是在你编写 JavaScript 时，如果 
确实：要得到下一个表单元格，或者需要得到包 
含-个 W 像的元素，那么 DOM 就是绝好的 m 

另外电 t 耍 的足，如果没 hDOM ， 将没朽办法住 
豇卤 t 移动，特别是如果以面 t 的各个元桌没有 
id 诚性时，要想在圮素间柊动別无他法。 DOM 只 
是可以…来控制 WebU (面 的乂 -个 HH 。 

在 F —荩中，你会看到 DOM 还允 i 午你做史多事情， 

而不只是完成移动……利川 DOM ， 你可以动态创 
达元桌和文本，并把它们放在豇而 h 你希嚷的任 
M 位肾。 

DO JVi 是—个在 

Web^^5rf>^pi 

移动的铯偉王 H 
利伊 DOM , 儇得 
崔找次有 i ’ d 属惟 
的宂素裝得笮易 a 
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文档对象模型 


DOM 镇字游珙 

花点时 N 啪下来， 让你的 右脑活动活动。 H 答下面的 N 题，然后使用答案中的卞以 
填出密信。 

这个方法根据元素 ID 返回一个特定的元素 D 


1 2 3 4 5 6 7 8 9 10 12 13 14 15 

这个属性返回一个元素的所有子元素,， 


16 17 18 19 20 21 22 23 24 25 

浏览器把它转换为一个元素树。 


26 27 28 29 30 31 

这个元素属性表示该元素的容器。 


32 33 34 35 36 37 

这是浏览器为你创建的结果。 


38 39 40 41 42 43 44 

利用这个元素可以访问整个树。 


45 

46 

47 

48 

49 

50 

51 

52 








49 

27 

25 

41 

35 

28 


52 17 

8 45 

22 

7 

33 

51 

20 





13 

39 

48 

26 

33 25 10 

2 

34 









~46 

30 

34 

32 27 1 

~43 

一 
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练习答案 



DOM 镇字游珙 


你的任务是回答 f 面的问理，然沿使用答案中的卞敁填出密信。 


这个方法根据元素 ID 返回一个特定的元素。 

QETECEWENT6YJD 
~1 2 3 4 5 6 7 i 9 10 12 13 14~ 15 

这个属性返回一个元素的所有子元素。 

CHJ C D N 0 0 E S 名^ ^个洛作 著一个 爷点數 sS 

~16 17 18 19~ 20 21 22 23 24 25 

浏览器把它转换为一个元素树。 

MARKUP 

26 ~27 28 29 30 il ~ 


这个元素属性表示该元素的容器。^ ''X 


PARENT 

32 ii 34 35 36 37 


旬孑辛#.的 爷魚 




这是浏览器为你创建的结果 


0 0 M TREE 

38 ~39 40~~ ~~41 42 43~ 44 

利用这个元素可以访问整个树。 

DOCUMENT 一 h c “ we " f 的象色含 dom 树中的 辦珩内容 

~45 46 47 48 49 50 51 52~ 



A 

S 

T 

E 

R 


T 

H 

E 



0 


0 



A 

N 

D 

49 

27 

25 

41 

35 

28 


52 

17 

8 



45 


22 


7 

33 

51 

20 





Y 

0 

U 



A 

S 


T 


E 


R 








13 

39 

48 


26 

33 

25 


10 


2 


34 








Y 

0 


U 

R 

P 


A 




E 









13 

46 


30 

34 

~32 


27 


i 


43 
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7 管理 POM 


♦ 


我的愿望就是你的命令+ 



DOM 

有时你只是需 要一点 _控制。 

我们很高兴地知道 Web 浏览器能把 X HTML 转换为 DOM 树。仵这些树中柊动吋以做 
很多 If 情。不过 itlH 强人 的迠充分控制 DOM 树. IhDOMWfi •上去弓你期 锘的一 样。 
饤时，你所忠耍的足增加一个新元素和一苎义木，成荇要从页向完全删除一个元素. 
如 < im g >。 所有这些工作都可以利用 DOM 做到，甚至还可以做得更多。通过使用 
DOM . 我们还可以完全避免可能导致麻烦的 innerHTML 属性。纟, V 果怎样呢？ 我们得 
到的代码能陚 f * 页面更多活力，而乱不会把表示和结果与 JavaScript 混在一起。 
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Webville Puzzles 


Webville Puzzles . 授杈代理 


所有热炎十新鮮私物的孩 T •郎已经玩过你 々WebviUe Puzzles 开发的 Fifteen Puzzle 
游戏。公 ffl 在这个游戏 h.Ll 经賺厂大笔的 U ■金，他们想开发一个新的智力题游 
戏……所以乂找到你来构建这样一个交互式应用。 

这一次公司想开发•个釘点教育怠义的 游戏： Woggle。 这是-个生成哏 U1 的在线 
游戏。他们已经创违了 XHTML， 敁辛很清楚希窀这个智力题游戏怎样工作。 

以下是初始的 Woggle 豇曲' 。 

㈣ 4 X 4 的表格 。 S - 
•去 4 哒机的 3 


T 



一个玷蟥存_个輩4中 P •钱 用一: 欠。一 S 二个 
砧蚺6或 用过. 邱么6 f *) 幵诒 构運— 个由辈 



iii 个輩#瘫 
罨 B ! 5_含 

ii …… 


…… 4(91 

个挲淨~ 
分： f 个> 
琿 f 分.« 
珥2分。 


6 *: S 用过的鞏说 
律个稃中 
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管理 DOM 


要让 Woggle 游戏正常运行需要做很多工作，当然公司希望这个新应用马1：就能运行起来。 
在深人 XHTML 和 CSS 之前，先考虑一下这里涉及到哪些任务，毎个任务需要编写什么 
JavaScript 。 •列出各个基本任务（你要为这呜任务编写相应的代码），然后指出完成 
这个任务可能要使用哪些技术。 

. 

i 兑明： . 


任务2: 
说明: 


任务3: 
说明: 


任务4: 
说明: 


任务5: 
说明: 
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4 个任务 



giggg ] 

團圍關 ■ 


任务1:違 i 包宮随机貼块的游戏盘蚤。 

说明： 龙要一种方法揸供一组随机的字母。 

然后必涵在 4 x 4 的游戏盘®上为各个字母 S 示适 g 的珍僬。 
迖些玎能郐要在 initfageO 之类的&数中完成。 


任务2:点击一个贴块将字母增加到当前单询中。 
说明： 毎个贴块 it 要一令擧件处理稃序。达个 
畢件处理程序应当得出*击:？啷个字母. 捋拕它 增加到 
右达的 “ currentword ” （当前询）框中。 

然后，应当在表梏中紫用所点击的贴块。 


2. 存彖咚中将 
t 1 {穹邊禁用。 


哉们一个搴邙 
赴這乜4 3 下香仿 
Z^addiettetO 
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管理 DOM 



submitWord() 


^3： 用户玎认尚服务器揸交单询。 
t 明： 用户点击 “Subwit Word " (揸交单询）时, 
当箾询会崖送到服务器绡我序。 

我们还 t 要注册一个矽调&数处理驵务器的咱应 


woggle.js 

JT 

系一个 Aft . 我们的 

(? il & & 


合4的倜含沐 A ： 到 
这个德中 . 


. 备坩加一个含法的部， 

得分将更供。 




woggle.js 

jn 6 mitWo^()g 以瘟盎#发送一 
个 M 务器叇迮4螬求 




任务4:利用服务器的响应 更新得 分。 

说明： 服务器响应时，必银垔新得分， 

搏向 " usedwords " ( Bffl 询）框增加一个含法的询; 

还必绍从“当前询”枢删除达个询， 

捋爯次后用贴块。 


M 2 


% 


Submit 


画 BB 




onreadystatechange 


updateScore; 


m : m * ㈤ ’个 n 
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css 定位 


Woggle 不用表簞元掊放 I 贴块 

既然已经有了计划， F 面来看 Woggle 游戏的 XHTML。Wogglc 的设 计人员 听说过 
关千表的一些不好的传闻，所以这个页而的结构梢有不 M。 这一次毎个贴块由一个 
<a> 元尜表示，而不放仵一个表单元格中。这样会更好 一哗， 不过这也意味笤我们 
需要洱多做一些工作。 

XHTML 如下所示。 


<html> 

<head> 

<title>Webville Puzzles</title> 


6 技甘光坩如这螌卿本扪用。 
A 们将朽用 來釗 <-个 
讀求的象…… 


clink rel= w stylesheet f, href= H css/puzzle.css" type= M text/css r, /> 

<acript src="scripts/utils • js" type=^text/javascript /# X/script> ^ 
<script src="scripts/woggle _ js" type= /# text/ javascriptX/script> 



</head> 

<body> 

<div id= f, background M > 



<hl id= f, logotype f, >Webvilie Puzzles</hl> 


. 另外邮 卹本中 貧全 


<div id= M letterbox "〉 


<a href=••#•• 
<a href=••#•• 
<a href=••#•• 
<a href= M # M 
<a href= M # M 
<a href =•，#•， 


class= H tile tll ,, x/a> 
class="tile tl2 M x/a> 
class= w tile tl3"x/a> 
class= w tile tl4 M x/a> 
class=’.tile t21 M x/a> 
class= f, tile t22"x/a> 
<a href= M # n class=’’tile t23 M x/a> 
<a href= M # M class =,, tile t24"x/a> 
<a href=.’# •’ class =,, tile t31’’></a> 
<a href="#’’ class= M tile t32 ,f x/a> 
class= M tile t33 M x/a> 
class=.’tile t34 f, x/a> 
class= ,f tile t41 n x/a> 
class= ,f tile t42 f, x/a> 
<a href= f, # H class= ,f tile t43 f, x/a> 
<a href= M # M class="tile t44”></a> 
</div> 

<div id= M currentWord M ></div> 一 


<a href= w # M 
<a href=T 
<a href=，•#，. 
<a href= f, # f, 



基一通 4 个 < a > 表矛笮力蛀表 
格中的一行 • 


iif •去箱倜- 


<div id= n submit ,f ><a href = M # ,f >Submit Word</ax/div> 
<div id= M wordListBg H > 

<div id="wordList"></div> < 

</div> 

<div id="score •’ >ScoreUO</div> 

</div> 




. Submit 

致在这 t 。 


Wotrf " 挺往 


</body> 

</html> 
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XHTML 中的贴块采用 CSS 定忮 


我们没釘将贴块放在一个表中，而坫力表示贴块的各个 < a > 圮桌给定 f 一 
个通用戈（ ** tile " ), 然后是一个特定戈，指示这个元素仵盘面上的哪个位 
置(例如 “ t 21” ）。 

<a href="#’’ class=’’ tile t21 u X/a> 

4 痊用到 象路 中斯电 
站咕的 一个！用 css 复 。 


# $ 在子辞定的咕衫 L 2 表 
孑行.（表•子列。辦以这基華 
2行中的第 （ fj 。 


CSS 使用通用类 “ tile ” 和特定貼块类 
( “121” . “142” 等等 、来指定贴块的 

样式和位罝。 / 

tr^ 


部 <5以7愚性 • 


/* tile defaults */ 

#letterbox a.tile { 

background: url(*../images/tiles.png 1 ) 120px 80px no-repeat; 
height: 80px; 
position: absolute; 
width: 80px; 


} 


/* tile positioning V 

♦letterbox a.til { top: 3px; left: 3px; } 

♦letterbox a.tl2 { top: 3px; left: 93px; 

♦letterbox a.tl3 { top: 3px; left: 183px; 

释 letterbox a.tl4 { top: 3px; left: 273px; 

• • • etc ... ^ 




css 中的在 《 个坫螭分列奇 
场 …… 爱共旬场 3 


ii 个 css 老表矛 咕蛸的备个 




下载 Woggle 的 XHTML 和 CSS。 

I 方 lHwww.headfirstlabs.com ， 找到 chapter07 文 

件夹。 "I ■以看到 Woggle 的 XHTML 和 CSS 。 要在 woggle - 
puzzle . html 中增 M < scripu >4 A 记，下面做好准备 来深入 
分析一些代叭。 


你现在的位置 ► 289 


Download at http://www.pin5i.com/ 






要灵活 


R : css 定位？我不太清楚这是 
什么意思<> 

^ : CSS 定位就 是指： 不依栉于 
XHTML 的绩构来完成页面上元素的定 
位，而要使用 CSS, 所以，如果希望 
对一个 <a > 元素完成 CSS 定位，要为该 
元素指定一个类或 id, 再在 CSS 中设置 
其 left 、 right 、 top 和 / 或 bottom 属 
或者使用 position 和 float 
CSS 属性。 

1^) : 这样是不是比使用表的做法 

要好一些？ 

^ : 很多人都这么认为，特别是 

Web 设计人员。通过使用 CSS, 你会依 
赖于 CSS 处理表示和定位问題.而不 
是依靠表中的单元格排列。这是一种 
更灵活的方法，可以使页面更能如你 
所愿 • 

R : 那我该用哪一种方法呢？表 
还是 CSS 定位？ 

^ : 嗯，使用 CSS 定位肯定没错 . 
因为要让你的页面在所有浏見器上都 
有同蛘的卟現，这是最容易的方法了。 

不过，史重要的是，不论使用表还是 
CSS 定位，相应的代码你都应当会写。 



假设你要为某个页面编写代码，这个 
页面并不总由你控制，所以你要能够 
处理各钟不同的鰱构和页面类 

1®) : 不过，我不理解 CSS 定位是 

如何做到的》你能再为我解释一次吗？ 

^ : 当然可以。每个贴块由 

XHTML 中的一个 < a > 表示.而且每个 
< a > 有一个 class 属性.实际上它包含 
两个类：通用类 “tile” 和表示该贴块 
的一个特定类，如 “132” • 所以对于 
系 3 行第 2 列上的一个貼块，这个类将 
是 "tile 132". 

在 CSS 中有两个应用到各个貼块的选 
择器： 通用规則 “tile” 和钭对贴块的 
特定选择器.如 “132” . 所以就会有 
选择器 a.t i le 和 a .132. 这两个选梓 
器都会应用到类为 “tilet32” 的贴块, 

通用規則处理所有贴块的共同属性， 
如高度. 宽 度和卟現。特定选择器則 
处理该贴块在 S 5 面上的位置 s 

R : 为什么要为貼块使用 < a >? 
它们并不是链接，对不对？ 

^ : 没错，它们确实不是链接. 

这只是 Wcbville Puzzles 采用的一种做 
法（可能他们考查了 Marcy 瑜珈网站的 
标签 页）， 具体使用什么元素并不重 


要，只要保证每个貼块对应一个元素. 
而 i 可以在 CSS 中对该元索定位。 

不过，之所以使用 < a > 还有事件处理 
枝序方面的几个考 4. 后面会详细讨 
论. 

: 我没有看到 “Submit 

Word ” 按钮那里只是一个 < div >, 
怎么回事” 

^: 要让一个东西看起来涞按 

< fl , 并不真的要有一个表单按钮。在 
这里 ， Wcbville Puzzle 的设计人 K 使用 
了一个背景 03( 象类似桉钮 &< div > 来表 
示 “Submit Word ' 桉钮。只要为这个 
< div >* 联一个事件处理锃序捕获点 
击事件，就可以在代码中把它处理为一 
个桉纽《 

碚处琪 所有夷型 
芴垡所要萊芹的 






关联到 <a> 元素的事件处理程 序通常 会返冋 true 或 
false 。 你认为浏览器会用这个返回值做什么? 
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提交单诵 


更新得分 


管理 DOM 


中的|00个®机, 
蚤 V 含出现1 
约12次。 


VWebvUU ^ wUS 


j^harpen your pencil 


il 


现在我们就汗始吧。首先，需要建立一个 
initPage(> 和-个 randomizeTiles() 函数。有几点 
你需要了解。 

1. 对 phi 1 、字母贴块在 puzzle.css 中有 - 个类。 
例如，对应贴块 “a” 的类名为 “la” [字 
母 “I” 表示卞母 (letter ) ,后面是这个贴块所 
表示的卞母 1 _ 

2. Wcbville Puzzles 给你传了一份字母颊度表。 
共 “26 项 . 包栝鉍个字母在这 100 个字母中出 
现的次数。要在 JavaScript 中把这个表表示为一 
个数组，数组戍当竹 100 项，毎一项蛙一个字 
母。 

3. 从这个颊度丧中随机选择一个字母就类似于 
根据卞母在 - 个间中出现的颊率选择卞母。 

4. \^11.^001 > <\1« 山 . 口 11(10010*2000> 将返 1«1 — 个介 
干 0~ 1999 之间的随机数》 

5. 需要至少分別使用一次 getElement Byld () 和 
getElementsByTagName() 0 

翮 JT • 下 - 豇之前 n l! 完成 initPageO 和 
randomizeTiles(). 祝你好运 ! 


你现在的位置 


这晷 28 e >3 j I ：糾士的备个《务 tf 先 . 


我们不想要完全随机的字母 


Wcbville PuzzlesfV 力题工作笮的人刚刚打电话来。他们认为盘面上不应3是 
完全随机的卞以。实眯上，他们希嗜字母能根据一 个字母 颊度表出现， 以下 
是他们传真过来的字母颊度表……这样一来,常用字母 “ e ” 和 “ t ” 比不常 
用的字以（如 “ Z ” 和“ W ” >在表格中出现的次数会多得多。 




备 （ 00 个字岳中出现的次數 


ii^ebville 的人发来的传在 


建立盘面 处理貼块点击 
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建立盘面 


建立盘面 处理貼块点击 


提交单词 


更新得分 


^Jharpen your pencil 
Solution 


你的任务是使用 2 9 I 页上的信息编写 i n i t P a g e () 和 
randomizeTiles () 的代 fi 1 .!, 还可以给出这些函数之外的另外一些 
JavaScript 你是怎么做的？ 


window.onload = initPage; 細嗜 ? 必 * 磚用 t m 〜() 相 


"a", 

n a m 
d 9 

m n n 

a , i 

"e". 

"e". 

t*0t» it 

"g". 

f, h ,, / 

" h ", •• 

• ， k' 

"1", 

"1"," 

万，， O "， 

” o M , 


f "r", 

"r", 

•， r ' H 

V "t", 

w u ". 

" u ”，•• 


new 

Array ( 



个象 






"a". 

"a", 

"a". 

" a ". 

"b". 

"c". 

"c". 

"c". 

• ， d". 

” d", 

"d ”， 

« e ". 

••e". 

"e", 

• ， e_\ 

"e". 

"e". 

"e", 

"e ”， 

••f". 

"f". 

"g". 

"h". 

••h". 

• ， h". 

• ， i ”， 


"i". 

"i ”， 

"i". 

"i". 

"i", 

"j ”， 

"1", 

• ， m M , 

"m". 

"n ”， 

”n". 

"n". 

"n ”， 

"n". 

"n", 

"o' 

"O ”， 

"o". 

"o M , 

"P", 

"p", 

"q", 

"q”, 

"q". 

"q", 

"q". 

" q ", 

••r". 

"r". 

"s", 

"s". 

"s". 

"s". 

••s". 

"s", 

"S M , 

"s ”， 


"t ”， 

• ， v”, 

"w". 

"X", 

"y", 

"z"> 








a ”， 

e", 

■h", 

1 ", 

o n , 

r", 


我 fH 采用 ii 神 方式表矛 字邊秭 度表， 备个穹备奋敦《 中出现的次兹汪基 
WeSvitle Pi «*£« f | 在洽我们的钃廈 表中孩 字邊在 莕 ( 00 个穿 岳中达现的次 

數。 

function initPageO { 用 ) 4 二笮 ’ 
randomizeTiles () ; 短表格， 


把这个 hvaSctipt 放 入一个 

扣之件 • j s 。 



woggle.js 




function randomizeTiles () { 


光•得 f.J letterbox <rf«v> ♦ 


var tiles = document .getElementById ( ,f letterbox") .getElementsByTagName (*a f )； 

的子 S 个个介子 0 利 99 ； ^ 间 ㈣ 

for (i = 0; i < tiles, length; i + + ) { 机索 # . 


var index = Math.floor{Math.random<} 
var letter = frequencyTable[index]; 


100 ); 


• P 


. 冉从字姿讀麾表中 


'1 1 + letter; 


tiles [i] .className = tiles[i].className 

， 一 ^ y 弋 ••••-«.# ft A . -r k / •及 M 

5 以 . 細 “ ，桃侈用 - 个上，备〜 

名。 
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表示全鄯鄯在 CSS 中 


通过使用类名而不是直接把< i mg >插人到 XHTML 中，这样就使 
JavaScript 行为弓页面的表示、内容和结构完全分离。假设付 f 第2行第I列 
的! llA 块， Math.floor(Math.random() * 100) 返 N 的随机索引为4。 


frequencyTable 屮的 声5项是 “ a” ，所以这个贴块/、 5 /当是一个 “a” 。 f 日.是 
并不是由代码直接插人 U T " 图像并处理图像 URL ， 这 MU 是为这个贴块 
增加类。 


袅进索？ | 认 0# 姑 0 .蚵 
*4 # 命驀 5 碭 

(«. a. o. a ) 0 一 



<a href=’’#" class= 、’’tile t21 la " x / a > 

这 - 郝分 3 绞奋的在^ f ； / 0分由 ian ( iowi « U es () 嫌和 


现在使用 CSS 指定这个字母如何陡示， 

/* tile lette^ 
lletterbox a.La { background-position: Opx Opx; } 

#letterbox a.lb { background-position : -80px Opx; } 
♦letterbox a.lc { background-position : -160px Opx; } 
#letterbox a.Id { background-position : -240px Opx;) 
释 letterbox a.le { background-position : -320px Opx; } 
• • • G tl C • • • 



puzzle.css 


现在设 i 十人§玎认冇所选择 


由于所有表示都放在 css 中，现在页而的设计人 M 可以采用他们希望的 
任何方式显示贴块。他们可以对毎个字母使用一个不同的背詨图像。不 
过，对十这个 Woggle 游戏，设计人员对所有贴块都使用了冋一个图像+ 
tiles.png。 实际 h 这个图像 中包含 了毎一个字母贴块，各贴块分別有合 
适的大小。这个图 像仵 a.title 类的选择器巾设置为 ff 欤阁像。 


奋第 5 耷中魷 采用了 2神方:‘在乘公 
迮二 奋处 理’扣 ~沌绝” 在 


芍以$卷289毋 i ： a . tite 的 CSS 逢猜 S 。 


然后，在每个卞母特定的类中（如 3 . 13 或 3 . 1 屮，会调整阁像的位祝， 
从而 敁示 这个 m 像中适当的部分。根据位 1 的不同，就"〖以得到的 
字母，而且如果设计人员想要一个新的外观， H 需改变 css ……完全不 

用接触你的代码。 
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更新得分 


管理 DOM 


建立盘面 处理貼块点击 


f 要一个新的摹件处理程序处理貼块 
点击 

接下来，需要为表格中的贴块指定一个事件处理程卬。这个事件处理 
程序需要做以 F /1 件事。 

o 得出点击了哪一个字母。 

Kft •处理程序知道点击丫豇向' h 的哪个 < a > 元素。由此，要得出所 
点击的 < a > 元尜表示的贴块上显示的字以。 


© 向当前词框增加一个字母。 

一旦知道选择了哪个卞母，要把这个卞母增加到 
< div > 中的当前词梅。 


currentWord 


0禁用所点击的字母。 

还 要保证 已经点击的贴块不能再点占，所以需要禁 
用这个字母。为此有一个 CSS 类，名为 “ disabled ”， 
与 “ tile ” 、 tt t 23” 和 “ lw ” 戈•结合应用于各个贴块。 


这个类表芳 W 
$矛的字邊 


个灸象孑坫钠的沄 f 


ii 个类让理蚵车玷蛸的 
路式化。 


f^harpen your pencil 

以 >. 列表屮实阮上少 了几点 • 
你能发现少了什么吗？ 
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交单词 


更新得分 


孖绐建交 毎个贴 块点击擧件的擧仵 
处理程序 

要编写大段的代叭，最好的办法是一次完成一步。泞先，下向为 
事件处理:程序法立•个骨架。这 H 足•个饤命名的函数块，利用 
这个骨架„]•以完成各个部分的关联，逐步测 忒我 们的代码。 

把这个数增加到 woggle . js 屮： 


function addLetter () { 



// Disable the clicked-on letter 



woggle.js 

玎认在 rawdomizeTilesO 亟数中指定 
一个攀件处理程序 

现在继续为各个贴块关联唞件处理程序。我们已经在 
randomizeTiles (> 屮对所■贴块进彳 j " T 迭代处理:，所以 
起来很适合在这里指定我们的事件处理程卬。 

function randomizeTiles() { 

var tiles = document .getElementByld (•'letterbox*' 

• getElementsByTagName(*a'); 
for (i =0; i < tiles.length; i++) { 

var index = Math.floor(Math.random() * 100); 
var letter = frequencyTable[index]; 
tiles[i]•className = tiles(i].className + 

•1* + letter; 

tiles[i].onclick - addLetter; 

1 现奋芍以一 以蝤？ 一这涮试我们的 

} 攀 4 处迮忮 4 。 



成—步^ 

在继续编箬下 

要保钲现有 f 
者段代碚摊芘 
第 X 怍。 
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JavaScript^ 厲性值 K 是 字符每 

到 H 前为止，我们大多使用对象的 classNameM 性柬改变 CSS 类。对十 Woggle ， 
实际上是向这个厲性增加类……不过，如果我们想读取这个值呢？假设第3行上 
的第2个贴块表示卞母 “ b ” ，这个贴块的 className 值可能如下所示。 


<a href="#" class= M tile t32 lb"X/a> 


第 3 H 


jr 


舉 2f) 




因此可以得到一个 className 属性，其屮乜食 < a > 元桌所表 
示贴块的相应字母……那么怎样得到这个字母呢？非常幸运， 
JavaScript 提供了很多 有⑴的 卞符串处理工 ft 闲数。 


substring 


substring(start 1 nde x, endlndex> 根据 • 个现•有 
的字符串值返回从 startlndex 到 endlndex 的一 

个串。 


var foo = "foolish".substring(0,3); 
var is = "foolish".substring(4,6); 






split 


var pieces 


-个字符串分解为由 
splitChar 分隔的多个部分，这些部分返 回到一 


, Decide ’ 


"Decide ， Commit,Succeed".split(" n ) • 

alert(pieces[2] + »,» + pieces[1] + » « 


pieces [0]); 


c^barpen your pencil 


il 


你会怎样编写代叭来得到 所点心 贴块表示的卞似？ 
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1交单词 


更新得分 


建立盘面 


处理貼块点击 


cc^Jharpen your penci 

^ Snliifinn 


il 


Solution 你会怎样亂弓代糾來 w 到 w 点山谢 


C 


<a href="# M class: 


iif 4 一个輿嘍杓坫硖无秦 


="tile t32 lb"X/a> 

令苋空格符分兵备个类。 




tile 


[1] ⑵ 


var tileClasses s this . className . splitl ); 李以 & # .. 

yar letterClass s tileClasse $ C23 ; ^ "" ^ 的 i a ii 个索? = 签子 40 丹枯一 ^ l lb 1 


vartileletter * letterClass . substring(l 2 )： 

^ 我们 $ 洱 f .) 一个字搿（長度巧〖）.它 
iJ ^ lettetClAss 1 ^ 的索？1 2科治的以这杖 

^letterClass .substring 1, 2) 0 


b 


想靂的! 



运行测试 


测试字母识别功能。 

将以上代码增加到你的 addLetter (> 函数中，另外在函数的敁后增加一 
个 alert (> 语句显示 tileLetter 的值,然后 ii 新加载 Woggle ， 许旮 



是否 


切正常 


»ddL 
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b^KciSe 


现仵必须得到所点 tb 的字母，汴且把它增加到 curr e mWord<div> 中。你会怎样做？噢 
付了，顺便说一句…… 这里不能使用 innerHTML 属性! 




innerHTML 要求你把 XHMTL 语法与脚本混杂在一 
起……而且你将无法提供保护来避免愚蠢的输入错误。 

一旦设 置一个 元素的 innerHTML 属性，也就是直接将 
XHTML 放在 riU'Ai 屮。例如，在 Marcy 的瑜珈页面中， 

我们用 JavaScript 将 XHTML 卉接插人到一个 <div> + 

(如下所示）。 

contentPane . innerHTML = n < h 3>" + hintText + "</ h 3>"; 

但足这里的 <h3>>^XHTML。 一旦在代码屮直接键人 
XHTML, 就会引人各种各样潜在的键人错误或者其他 
小问题（如忘记增加 < p > 的结束标记）。不仅如此，不 
冋浏览器有时会以不 N 的方式处理 innerHTML。 

所以 W 要有可能，就绝对不要直接在代码中改变内容 
或表示。相反，要依赖子 CSS 类改变表示……在代码 
中还能用什么改变结构而不会引入键人错误或漏掉结 
朿标 ild 的错误呢？回答出这个问题，你就能得出以上 
练习的答案。 
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内容和结构 


建立盘面 


处理贴块点击 


■ E 新得分 


f 奚向 M curreiitWord w <liv>f|>i^^ 
和结构 

玩家点击一个宇母时，这个字母会增加到当前词中。 H 前，我们已经得 
到了一个 id 为 “ currentWord ” 的 < div > ，彳日.是这个 < div > 中什么也没有。 

<div id='currentWord'></div> 

那么我们需要做 n •么？必须在这个 < div > 中插人文本，但是文本并不总是 
直接放在 < div > 中。文本域 子一 个文本元素， 4n<p>. 所以以下才是我们真 
正想要的。 

<div id='currentWord'> 

<p>Current Word</p> 

</div> 

使用 POM 改变页 i 的结构 

你已经知道使屮如下的代码汴+是个好 主意。 

var currentWordDiv = getElementByld ("currentWord") ;• , 

currentWordDiv.innerHTML = "<p>" + tileLetter + "</p>"; 

不过确实有一种方法可以处面的结构而不必使 HlinnerHTML ， 这就 
是 DOM 。 你已经使用过 DOM 在页面中移动，此外还可以使用 DOM 修改 
页面。 


挪 ”/⑽. 


从浏览器的角度来看，以下是表示 currentWord < div>mDOM 树的一部 

分《 _ _ _ 

div |j<Jd=currentWord ) 杏 — f — 它 辛一个 j 暴伐 . 

" euxie^t^oii 

需要创违类似下面的 DOMW 。 




00 _<&>卷敵 I 4 •一 九名 W 免 



j—id=currentWord ) 


f f 增加一 个扣的 < p > 尤景 O 
孑犬柰 . 





#text 
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使阁 createtleweMtO 创建一个 POM 元素 

还记得 document 对象吗?我们又要使用这个对象了。可以调用 document . 
createElement () 创逮一个新尤紊。只需要为 createElement () 方法提供要 
创達的元素的名，如 “ P ” 或 “ img ” 。 


element 

e - ，一 

c\eate^lement{)^) 

冱© —个的象，表•子 
的 f 的 00 W 无景。 


document J createElementfy 


cte ^gElen\ent()^ 

document^ 

个 7: 去 


命 个方法 入无棄的名 3 

2个字 q.TS 分 这？袅 

大 •)•？， 刁以沒用 不展 <JJ > 。 

** •* l . ••一 •• 
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节点放在哪里‘ 


^iJjarpen your pencil 

Solution createElement (> 方法是 document 元索的-部分， document 包含 





浏览器 DOMW 屮的所有内綷。你认为这个新元素应该增加到 
DOM 树中的哪个位置？ 

它是 DOM 树顶展 document7f ： 素的一个子 
元素 * 



它是 DOM 树底层的一个叶+办点。 



所有位置邯 个对， 这个新元素+诚于树的 
一部分。 


必颔查卫浏览器要拕新创建的 P 0 M 节 
点故在哪里 

Web 浏览器非常#于依指令行事，不过自行作出决定则不是浏览器的 
强项。创逑-个新节点时，浏览器根本不知道这个节点要放在哪里， 

所以在你吿诉浏览器应该把 W 点放在哪个位腎之前它什么也不做。 

这个问题很容易解决，因为你已经知道如何向一个元素增加新的子节 

点： 只需使用 appendChildO 。 所以可以创违一个新元素，然后把它 用作< 

作为新的子元素追加到一个现有元素。 tT ^ <ilv>u 

var currentWordDiv = getElementByldCcurrentWord ')； « - g-'i ^ ^ gr 

var p = document.createElement('p'); < p >^, 

currentWordDiv.appendChild(p); 

& JS . ^ 

〈山 v 〉 的 ！ 疋棄。 
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处理貼块点击 


I 交单词 


更新得分 


管理 DOM 



可以创建元素.文本、属性等各种节点。 

document 对象有很多非常有用的创建方法。可以 
使用 createElement (>、 createTextNode (>、 
createAttribute (} 等力•法创违元素节点、文本节点和 
域性节点等各种节点。 

每个方法都返回一个新节点，可以把这个节点插入到 
DOM 树屮你希嗜的任何位肾。不过要记住，在把竹点插 
人到 DOMW 中之前，它不会出现在你的页面上。 






广 [document jTl ^^ ateAttribute ^ 

薦性爷魚厲子一个无景…… 

不 a , (if 由伐來:央定 。 


L id IV M tile 2 lTn 

— 1 1 ^ 

cieateAtt t ,6ute()Si -个洛伐名扣一个 
僅作巧参蛊。 



呑旮你能4、能完成代码，将一个字母增加到 currentWord <div>。 把你的代矾增加到 
addLetterO^f 件处理程序屮，尝试运行这个应用。是否 W 如你所想？ 
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function addLetter()( 

var tileClasses = this.className. 
var letterClass = tileClasses[2 】 ； 
var tileLetter = letterClass.subs 


— S ^615〈 p > 舍〕 




交单词 

更新得分 





㉚ 



[1 



f 1 

I 


k 
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DO 卿 

下面来分析 Woggle 和我们的 addLetter () 事件处理程序到底 
出广什么问题。使用下面的 DOM 贴为以下不同情况建立 
currentWord < div> 之下的 DOM 树。 


第一次调用 


addLetter() ( 


div 




•currentWorcT 


…… 第二次调用 
addLetterG 。 


div 




currentWord 




第三次调用 
addLetterO 。 


div 




currentWord 




n I 值用多汰。 




tliereiqre nQ 

Dumb Questions 


l 1 ®) :调用 appendChild () 时，传入 
这个方法的节点到底增加到哪里？ 

: appendChild() 会把这个节 

点作为父元素的最后一个子 节点。 

:如果我不想让这个新节点作 
为最后一个子节点呢？ 

:可以使用 insertBefo- 
re() 方法 0 要向 insertBefo-re() 传 
入两个节点：一个是要增加的节点， 
另一个是现有的节点，新节点将插入 
到该节点之前。 


:上一章中不是使用 
appendChild () 来移动元素吗？ 

没错。不论向 
appendChild() 或 insertBefo- 
r e () 传入什么节点，它都将作为一 
个新的子节点增加到调用 a p p e n d - 
ChildO 的父节点上。如果该节点已经 
在 DOM 树中，浏轧器就会移动这个节 
点，或者如果该节点尚禾作为树中的一 
部分，浏見器则会把这个节点增加到 
DOM 树中， 

: 如果一个节点己经有自己的 


子节点，再追加或插入这个节点会发 
生什么？ 

^ : 浏艽器 会把你插入的元素以 

及它的所有子元素都插入到 DOM 树中。 
所以移动一个节点时，实际上移动了 
这个节点以及 DO M 树中该节点以下的 
所有节点， 

能不能从 DOM 树删除一个节 


当然可以，可以使用 
removeNode 。 方法从 DOM 树完全刪 
除一个节点。 


点？ 

答： 
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nodeName 和 nodeValue 


建立盘面 处理貼块点击 


t 提交单词 


更新得分 



下曲来分析 Woggle 和我们的 addLctter() 事件处理程序到底 
出 f 什么问题。使用卜'面的 DOM 贴为以下不 M 情况达立 
current Word <div> 之下的 DOMt 对。 


问聪饫出在达1,对不对？每次请用 addUtterO 时没 
笮坩加到笫一令文本节点。实标上毎次增加7—个新 
的 < p > 和一个新的丈本节*。《我们薰要改変规笮的 
文本节点，对不对？ 


有些节点有一个 nodeName 属性，另外一些节点有一个 
nodeValue 属性，还有一些节点这两个属性都有。 

第一次调用 addLetteirU 时创达 1 T — 个新的义本节点。恨 
是在后面的调用中，我们需要 addLetterO 改变该节点中 
的文本。这4以使用文本节点的 n o deVa 1 u e 属性来做到。 

_ _ 1 i 棄或条 乜名。 


每个 DOM 节点冇两个基本厲性： nodeName 和 
nodeValue 。 对干一个元素， nodeName 足元素的名。对 
丁•一个属性， nodeName 是属性名， nodeValue 是属性 值； 
而对于一个文本节点， nodeValue 足;节点中的义 本。 
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pf 认由 nodeName 和 wodeVal ⑽厲性了解节点 


V& 


节点类型 


nodeName 


HodeValue 


document 


head 


P 


Webville Puzzles 卜 


document 节点 


无素节点 


"document* 


r head* 


^ S, 6 f | ncrfeName ^ ft ^ *6 

无最节盎 




元膏笮 彖沒车 

noil ^ A ^ u * ° 


j 


null 


文枣节 * 


^text* 


r Webville Puzzles" 


展性节点 


之本穿魚的 ModcVaitte 4 Jt i 本 

_ " id - _ 


letterbox 4 


(parpen your pci 


il 


你要准备完成 addUuerO 中的部分功能，即从点占的贴块获取 
字母,并把所 点击的 字母增加到 currentWord <心>中。看看你 
观任能不能写出这个闲 数的扣 余代叽……不竖忘 U! 进行测试！ 


奋 d r 鸹？伐的 


H 士冷4, 豸蚌 V 柒+ - W 绀 T：1 乜 M # U3| S 3 PONPI ! ip 
3 p°u ‘诩塊苹癍士明穿遙彳一问 ^ s 3 P 0 NPI!ip 3 pou :尘斟 
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增加字母 


建立盘面 


处理貼块点击 


I 交单调 


更新得分 


iljJharpen your pencil 
、‘ Solution 


使用前两茕学到的 DOM 知识 ， 你能完成 addLette r ( >的这一部 
分吗？应该能给出类似卜'面的答案。 


function addLetter () { 

var tileClasses = this.className.split( M "); 

var letterClass = tileClasses[2 】； 

var tileLetter = letterClass.substring (1,2); 


var currentWordDiv 

if (currentWordDiv.childNodes.length = 

var p = document .createElement ( ,f p M ); 
currentWordDiv.appendChild(p); 
var letterText 


document.getElementByld("currentWord ”）； 

t — — - 芒光 tit 罨 
: 0 > < 基否3绞奇孑爷点 


^ 这 4 以铊的代砝。现 

( O ^5 ^ cuttent\Mord 

document .createTextNode (tileLetter) ; \ , . # . .. _ 

\ is ㈠ 达个代故： 


p.appendChild(letterText); — 

io Jficunent^Joid <Av>^ 孑分占 . 

} else { 

var p = currentWordDiv. firstChild; . VJ* f') <lp> • 粍 1 i 11 食 

t^ 00 ^ <p〉(^ i 冬子 / 免 . 


var letterText = p.firstChild; 
letterText•nodeValue += tileLetter; <- 


…… 将 新字劣 加到这个丈 
本 H 


f ^) : 再问一次，这里的 

childNodes 属性是什么？ 

: childNodes 是每个节点都 

有的一个尿性„它返回该节点所有子 
节点的一个 ft 组，如果这个节点没有 
任何子节点，則返回 null 由于这是 
一个敦组，所以它有一个 length 属性， 
可以指出 ft 组中有多少个 节点。 


tiiereiore no 

Dumb Questions 

2 难道不能跟踪是否调用了 
addLetter () 并以此作为 条件？ 

^ : 不行，这徉并不总能奏效。 

菸一次调用 addLetter 《 ） 时，确实需 
要创建一个 < p > 和文本节点。但是如果 
玩家提交了一个单词，而且盘面重罝， 
則需要 addLetter <) 再次创建一个新 
的 <p> 和文本节点。所以只是检查运行 
了多少次 addLetter (> 还不够 4 


f ^) : 我写的代码与你的有所不同。 

这样行吗？ 

^: 当然可以，通常醉决一个问 

題至少有 2 到 3 种方法。不过，要保证 

你的代码总能正 常工作 . 而且只在 

必要时才创建 DOM 节点.如果这两点 
都能保证.那么你完全可以使用自己 
的 addLetter U«» 
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由你控制 DOM 结构时，不会发生你未曾指定的事情, 

浏览器根椐一个 X HTM L 文本文怍创违 DOM 树时，将 
由浏览器控制一切 。浏览器会做它认为最适合表示 
XHTML 的事情，冇时这息味 打把行 结朿符或额外的进 
格符和4格解释为包含空「 I 符的文本节点。 

但是当你对 DO M 树进行修改时,一切会由你来控制。 
浏览器不会插入任何东西,除作你告诉它那么做。所以 
处理你插人到 current Word < div > mDOM 节点时， 
祖心额外的空白文本点。实际上，你完全可以获取 
<1^>的第一个子节点， ifiifl 清楚地知道这足一个 < p >。 


-运行测试 


测试改进后的新事件处理程序。 


现在来肴 addLetter () 的工作如何。毎次点击-个贴块时，它应当 
向当前词框中增加另•个字母。现在一切正常吗? 



■■匯 j ; 

S V f. : I 

I 


不过，还有儿个与贴块点占有乂的 •)!： 情需要完成……你能找出是 
什么 M 题吗？ 
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根据需要改变 css 类 


逑立盘面 处理貼块点击 


_交单词 更新得分 


fl 禁用各个贴块。这说硪要改变贴 
块的 CSS 类…… 


一旦玩家点击 r -个贴块，他们就不能再点右这个贴块 
点! t ? r 贴块就要将抟禁用。 


所以只要 


■HQ 




这属于表示部分，所以你吋能已经知逍该做什么 r ， 对不对？在 
addLetter () 中，需要•向所点占的贴块增加另 - 个 CSS ! l$ B puzzle , 
css 中和-个名为 “ disabled ” 的类作常适合完成这个工作。 


将 I 、'面这彳 f 代 ㈣ 增加到 addLe 11 er ( >的最后< 

function addLetter() { 

II existing code 


HU . 叫州 a 


this. className 


disabled' 


} 


f 保有 - 个交格将 css 类破 rt 分 


观 ft ，一 U 运行 addLeuer ()， 所点右 的贴块会变暗，右上上•不能洱次 
点击 • 

. # 兵闭 addlefterd 

擧件处逐系序 

只要有游戏，就会有一些玩游戏的人钻空+。对干 Woggle ， 尽管 
我们能禁用-个贴块的外观，但这并+意味苕点击贴块时什么也不 
做。点击一个贴块时——尽管巳经设 W fdisabled 类——仍会触发 
addLetter ㈠ 事件处理程序。这说明一个字母可能会被点*尤限多 
次……除非有停止措施! 

所以还忠要在 addLetterO 的敁后洱完成-步。盂耍刪除所点杰貼坱 

的 addLetter () ’ Jf 件处邱程序。 
function addLetter() { 

// existing code 


this.className += 

this . onclick = 


disabled ，，； 


^oncltckii 84_个 空菩。 ii 传将 去纹麝 
4 公理乜 4 a 
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运行测试 


我们己经……相当彻底地处理了贴块点击事件！ 

你已经向 addLetterU 增加了所有这些代码吗 ? 增加这些代码后， 
C 动 Woggle, 和构逮一些中 -is 】。 


mp , cwn.'l 


WdMlk c Pi\yzU^ 

ijSEE _ 

We ㈣知 f nzzl^ 


巧 AY/.， “㈣ 


)^h c P(\Z2h$ I I 
〜 一 _^ 

I 

- - rr - ■ 


■ 隨 


.•禁用 玷铗的 外现* 




. 冉與 f^Jonclick 

4 处理 <f4 



m 



你现在的位置 | 

► 311 

Download at http://www.pin5i.com/ 


















































请求就是请求 


提交单词 ：更 新得分 


建立盘面 处理貼块点击 


提交一个单词(另一个）清求 

addLetterrO 主要有关千 DOM 的使用,而向服务器提交单词則主要涉及 
请求对象。 Woggle 已经在服务器上运行有一个程序，它取一个中-讷，然 
后返回 这个电 词的得分……如果这个词汴小足•个 /( 正的英语单同则返 
N - 1 。 


务 一个 . 呢务器 I : 的一个今洱 
來 J 卷"扈 S 合法 》 




我们的 JavaScript# 不兵心服务器如何 
对清求得出响应 

对干从(^4(：应用，我们调用的服务器端程汴又向另一个程 rf •发出 r 另一 
介 i 齊求，不过这-点并不亚要'。实标上，即使 lookup-word.php 调用 
T •个 PHP 程序，然后向 个 Java Web 服务发出 SOAP 请求，再使用一个 
SMS 网乂向•个蜂窝电话发送消 4, 这也无关紧要。 ® 要的坫，我们要 
向服务器端程序发送正确的倍息，它要向我们返冋正确的响应。 


JavaScript jl ^ 

要考虚矣途锖求 
和处琺响应的洵 
磁…… 拆方 必兴 
心勝旁芻扣何得 
到洚些响 
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务器淒沒 4 纥送輩 # 


单词 


单词 


哚务器埒 0 一 1 ; 
I ®*j 以达个輩碑 


如《辈沒不含 •: 去 .^ 
如蓽輩说 4 含沾的 


士 7 某 辈碑 合沾 
家舞 ( 分 .® 1 
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^^rpen your pei 


ncil 


到目前为止，你 d 经构建并发送过很多请求对象。利用所学 
到的知 UU 你能写出 submitWordO 函数吗？ 
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同步还是很有用的 


建立盘面 处理貼块点击 


提交单词 ： 更新得分 



并不是所有请求都必须是异步请求。 

在前面的所有各章中，我扪让//:的邯足异步请 
求，所以用户不必等待口令检査或沉面加栽。 
但是在 Woggle 中，我们确实希望用户做其他工 
作之前先要等待服务器的响应。所以，把-个 
单 . U 1 发送到服务器计算得分时，我们需要使用一 
个 N 步请求。 



使⑴ M 步沾求向 Woggle 的服务器提交笮 1«1 还有 
另外-些好处。你能想到釘哪些好处叫？ 
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同步请求不需要回调函数， 

如果请求足异步的，浏览器会继续运行你的代码。 
所以在它运行 request . send ( null ) 之后，浏 
览器会执行发送函数之后的卜'-•行代码。这往往 
就是函数的敁心，闪为我们希望用户能继续处理 
Web 页面。然后当服务器响应时，会运行一个回 
调，这可能会史新页面，或者对服务器返问的结 


果作出响应。 


鵪 




但是对千一个 M 步请求，浏览器会等待服务器完 
成工作 。在服务器返回一个响应之前不会运行其 
他代码。所以在这种情况】、'，我们确实不需要一 
个回调函数。可以在发送函数屮继续做其他 r 作， 
rfii a 我们知道请求对象 中将包含服务器的所有响 
应数据! 


c^harpen your pencil 一 


再来 n 3 i 3 页上你写的代码，对它做 j 些修改。首先，确保 
你的请求是同步的，而不是异步的。然后刪除回调函数的 
引用，我们不需要回调函数！最后，在函数的未尾使用一个 
alert 框&示服务器发回的响应。 
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语句串链 


達立盘面 处理貼块点击 


提交单调 更新得分 


^^arpen your pencil 
Solution 


并确保它采用同步方 


ci 郝分榷去杉 tm&art 
州紙否矛中用 5 “ ‘, s 




你的仟务是构建 submitWord () 函数 • 

犬 I :作。你给出的代码足怎样的？ 

function submitWord() { 

var request = createRequest(); 
if (request == null) { 

alert ("Unable to create request object 、 
return; 冬光 • 沐管 *) S 含 • 去痢 # 的 

} <dtv>. 

var currentWordDiv = document. getElementById ( M currentWord f, ) ; ~) 

var userWord = currentWordDiv.firstChild.firstChild.nodeValue; 


var url 


'lookup-word.php?word =f, + escape (userWord); ^ f 第一个；元秦 

. 蛛后吞雙 A ’ • ^ %3 ^ 


roqueet lonroodystat e cih g nq 分 ■ 一 updatoSoor-o-f . 

request.open("GET ”， url, false); 

request, send (null); 枝常 一样盔 送淨求 . 不过 ii 

置值用 " ialse " 


f 逢— 个 


alert ("Your score is: +’• request. responseText); 

t 

$ 务器出妫在 e 后代砝对含秔行到 & j 
瓣以 9 以吝會祕仔用 wsjw ” seT«t 属传 


x ( <p>) H 后 & 

\ 个号无景 U 冬 0.). 择历* 

\ ii 个衫的辛考 • 絛。 

、 - - 

峩们&冱一个阕 歩碡來.錡以 
这 f 不聋 s ® 函敦 


tfiereiqre np 

Dumb Que 


2 我有些搞不懂 
currentWordDiv . firstChild.fi rstChild . 
nodeValue 是什么 意思。 你能解释一 
下吗？ 

^ 2 当然可以.可以把这个 
语句分成几部分。首先，有一个 
currentWordDiv.firstChild 。 这 
是 <div> 的系一个子元素，也就是一 
个 <?> 。然后，我们要得到这个节点 
的 f irstChild ， 这是一个文本节 
点。最后，我们焊到这个文本节点的 
nodeValue , 也就是节点中的文本一 
用户输入的单词。 
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_ 8ti9n^ 

:哇，太复杂了。我必须这样 
写代码吗？ 

^ : 不必，不过与分成多行相 
比 . 这样确实要快一痊，因为一次就 
能解析整个语句，而且只刨建一个变 
量，所以与把它分成多个部分相比， 
JavaScript 能更快地执行这行语句。 

R 2 难道你忘了检查请求对象的 

readyState 和 status 码吗？ 

^: 发出一个同步请求时，没有 

必要检查请求对象的 readyState 。 只 


有眼务器完成其响应之后，浏見器才 
会运行你的代码.所以等到代码能够 
检查 readyState 时 . 这个尿性总是 4 。 

确实可以通过检查 status 来确保你的 
请求得到了处理而没有出现错误。不 
过，由于从具体的 呤应 就可以了解这 
一点，所以通常更容易的方法就是直 
接访问 responseText. 要记住，我 
们没有做异步请求，对于一个同步清 
求，没有必要在回调中检査 r e a d y - 
State 和 status ( 译者 ; i : 更确* 々地 
讲 . 对于同步请求 . 回调 A 数本身都 
是不必要的，也没有.办要在发 送洒敫 
中检查 eadyState 和 status). 


Download at http://www.pin5i.com/ 










管理 DOM 


5 T 用性检 t : if 么紂候 玎认调 @ 

submitWordO ? 

测试过你的新 submitWordO 函数吗？如果做过测试，你可能会发现到 
这个味 I 数还没 Nj 其他内容 ii • 起来。 M 前， “Submit Word” 按钮什么也 
不做。实际上， “Submit Word” 只足-个 <a> 元素，根本不是 - 个按钮 ! 


<div id=submitXa href=#>Submit Word</aX/div> 


再设筲 <0^"> 和 <61> 的样式，使之石 • 上去像足页面上的按钮。不过， 

由 r • 贴块也存在类似的情况，所以解决这个问题并不难。可以向表 

/!'： “Submit Word” 按钮的 <a>/t 桌的 onclick 事件指定一个事件处理程序。 

疼 f‘j ! 

var submitDiv = document.getElementByld("submit"); 

var a = submitDiv. f irstChild; ^ - 得 |_)< 仏〉•的第一个子 H 


while (a.nodeName == "#text") { a = a.nextSibling; 
a.onclick = submitWord; _ _ 


由子将由浏％器釗建&部分 DOM 
在劣砝保 (if 不色含空佥玄本爷 


如果浚冇要槿交的询就不能拢交单询 

那么，你认为这些代码应该放在哪里呢？放住 initPageU 中吗？不过这 

有4不合押. . 在 initPageO 中， ’*1 前 iri 】 框还没有任何字〖:]：，所以玩家 

不能提交任何内容。 

第 次 可以提交单词时就足当前词抿中第一次有字母的时候，此时第一 
次点击一个贴块，相应地，此时会为一个新 U 1 第-次调用 addLetter (>。 

幸运的是，我们有一个特殊情 况： 第一次为一个新词调 HladdLett - 
er (> 时，我们在 current Word < div >~ F 创逮 /< p > 和文本’//点，所以只需把 
以 h 代码增加到 addLetteirU 事件处理程序的这一部分。 

if (currentWordDiv.childNodes.length == 0) { 

// existing code to add a new <p> and text node 
// existing code to add in first letter of new word 

// code to enable Submit Word button 


錡车 ii 喹扣代砝- 


••… 部放在这 f 


} else { // • . . etc ... 
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运行测试 


it 立盘面 


处理貼块点击 


提交单词 .更新得分 


运行测试- 

看看你的单词的得分，试试看！ 

为 addLetterO 增加了所需的所有代码了吗?完成修改后，启动 
Woggle ,并创建一些新词。 




: f T® 

:l 碰 [®: 


现 存巧以 用坫蚺釗 si 
荦谒。 


Webville Puzzles 


The page at http://www.headnrstlabs.com says: 


Your score is 10 


Wd 


.•击 u6 mi t 

W 07 厂 tj 0, 




1;. 少输人—个手母之 Vi •点 ili “ SubmitWord ’ ] •会 iM ) 用 submitWord() t 
不过尽管如此 ， “Submit Word " 希上去仍像迠一个按钮。 H 1 户太 
V - 点由 “Submit Word ” 时如何 It 用户知道应该怎样做?你能编写 
相应的代码吗? 
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♦★VI 备 O 务鬌 I 


npJeVaJut 


eg., ii 不 4 pai^eint 
DOM 方: •在. 

不过说不: <1 

0么的该杖 i««nWeCMlJ 
含瓮# ( i 个 

方 : 在。 piev1pusS!t»ltng 




将左边的 D O M 属性和方法与右边使用 这些诚 性和方法完成的任务 
相匹配, 

希望得到 H 前所在表电元格左边的那个 
表单元格。 

希望得到-•个特定<(1~>中的所有 
<p>。 

沿嗜 上-除豇面上的所有<1«>元桌。 


l-epI^ceNjoJc 


冷嗜将一个 <img>；t 桌替换为一些描 
述性文本。 

希望打印一个名，它在 i d 为 
“name” 的《^>屮。 

需要将两个表单域的数字 fft 
相加。 
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开动右脑 ! 




将左边的 DOM 铽性和//法与右边使川这吟诚性和//法完成的任务 
相匹配。 



沿望得到目前所在表申.元格左边的那个 
表中.元格。 含运疋 


个鞾 tDOM 爷 * 
希喏 得到-个特定 < div >. 的所和 _ hK .’ 


<P>C 


洽 切去 除豇尚 h 的所 ff < br >7 t 素。 
希切将-个 < img >/ C 桌锌换为 一呜描 


«- 



iepL 


pax,*int( -21" )H$ 21 


述性文本。 

希頦打印一个名，它在 id 为灼卜 
‘name” 的 <div> 中。 ‘ 乎 - 如喊 0 。 


耑耍将两个表单域的数卞值 
相加。 


爷魚中的 i 本由丈 
本 魚 tfy nodeKlalue 
属 性表承 v 
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现在把你目前所学综合 起来： DOM 管理、创违 DOM 节点. JavaScript 字符串函数、 
处 理服务器响应 （译者 ii : 原文此处为“请求”， 有误） ……这个练习包含了所有 
这些内容。按照以下 指令完 成这个练习，毎完成一步在相应的步骤上打勾。 

如果服务器柜绝所提交的申 . U 1, 要告诉玩家，向玩家提供一个消 
息 “You have entered an invalid word. Try again!” (输人的单阔非法， 

请重 试！） 

如果服务器接受了所提交的单 U ], 将接受的这个 i «】 增加到 “Submit 
Word" 按钮之下的接受词框中。 

得到当前得分，并加上服务器为刚接受的 W 返回的得分。使用这个新 
的得分，吏新屏痦上的 “Score: 0” 文木。 


不论服务器接受还是拒绝这个黾词 ， rm '1 前词从3前词框屮 刪除。 

□ 启用游戏盘尚 h. 的所冇贴块，并把 “Submit Word” 按钮歌 S 力其原始 
状态。 

□ 以下 DOM 树对应你要处理的页而部分（树敁初由浏览器创建）。 ㈣ 出 
运行你的代码接受两个之后的 DOMW (具体这两个 1»1 是什么并不重 
要，只要这两个词都能为服务器所接受）。 
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长练习答案 


提交单调 


更新得分 


建立盘面 处理貼块点击 



Xph? Exefu:iSe 

§OLyt|OH 以 m 整版本的 submitWordO。 观在它不仅会提交 一个中 .W， 还会更新! T 面上 
的得分。你的芥案与我们的代码接近吗？ 

function submitWord() { 

var request = createRequest(); 
if (request == null) { 

alert 「Unable to create request object ..”； 
return; 

} 

var currentWordDiv = document .getElementById ( ,, currentWord M ); 
var userWord = currentWordDiv.firstChild.firstChild.nodeValue; 
var url = "lookup-word.php?word=" + escape(userWord); 
request .open ( M GET ,, / url, false); 
request.send(null); 


如菜砝交的孑 不合法 
呢务 s 达® _ f 。 


^ 0 in 果服务器作:绝所提交 的间， 要告诉玩京 



将接收的词增加到接收 
词框中 


if (request.responseText == -1) 

alert ("You have entered an invalid word. Try again! M ); 

)else { 

var wordListDiv = document .getElementByld ( M wordList r, ); 
var p = document .createElement ( M p f, )； 
var newWord = document.createTextNode(userWord); 
p.appendChild(newWord); 

Ci 含釗達一个舸的 < p > 和一个扣的 i 冬爷魚. 

wordListDiv . appendChild ( p ); 典中 S 含用户 M 交的讲 . 样后把这驀个元棄增 

var scoreDiv = document.getElementByld("score"); 
var scoreNode = scoreDiv.firstChild; 
var scoreText = 

var pieces = scoreText.split ( f, M ) ; 

var currentScore = parselnt (pieces 【 1 】}; <： 、^ _ 戧 ‘ • 5 A 纠華 2 郝分 • jp £ 

寿望忿 0 名 f 教泛 p 

currentScore += parselnt(request.responseText); ° 

scoreNode.nodeValue = "Score:" + currentScore; 加上％务器的岵在 . 

) 鳔 后曼扣 i 本笮 . 夸.。 


scoreNode. nodeValue; S] 

* Scotr : 0- 辟分。 



电新保藉上的 “ Score : 
0” 文本。 
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管理 DOM 


var currentWordP = currentWordDiv.firstChild; 
currentWordDiv.removeChild(currentWordP); 
enableAHTiles (); _ 



var submitDiv = document .getElementByld( f, submit w ); 


var a = submitDiv.firstChild; 
while (a.nodeName == 
a = a.nextSibling; 

) 

a.onclick = function() { 


记 £ - Submit WoiJ 軲? £ 的搴 4 处理 
if } — 个 函赵。 

cJ 


alert ("Please click tiles to add letters and create a word."); 

}； 

1 卜个 1 ㈣ “用 

function enableAHTiles () { 

tiles = document .getElementByld ("letterbox") .getElementsByTagName ( M a ,f ); 
for (i=0; i<tiles.length; i++> { 

var tileClasses = tiles [i] .className.split ( M •’}; 
if (tileClasses . length == 4) { 

var newClass = 

tileClasses [0] +•’’. + tileClasses [ 1] +.’•• + tileClasses[2 】； 
tiles [i] .className = newClass; ^ — ^ 



uv 二 t 的板“-个 


tiles[i].onclick = addLetter; 

Fs 

记 (i. ~) 

^ddLetter 


f 堯用箱 3 个类.去.找第 4 个棄 


* 考案禾奔，翻扞 T — 頁. 
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我们说过的，这个练习很长 


提交单词 


更新得分 


建立盘面 处理貼块点击 



Excficise - 
L SotvtlOH (fg) 


以下 DOMW 对应你要处押的豇面部分敁初出浏览器创达>。_出 
运行你的代 叭接 受两个之后的 DOM 树 （ H 体这两个词足什么并 + 1 
要，只要这两个 U1 郎能 X/ 服务器所接 受）。 


div 


id=“backgrouncT 


1- 

div 

- ( id=**currentWord 

r?: 

-> Q ids-submir ) 




href= ,i # ,t J 


#text 


nodeValue='*Submit Word” 


div 


〈 id=“wordListBg” 


div 


id="wordList” ) 


~~ CT ] 


~Xnode\Jalue^ 


— (node\Jalue— 





div 


< id=“sco 「 6” ) 


#text 


(nodeValue= M Score : 


sco^e t 本 y * 将 t 扣后的钕饩 
$ 其 node\)alue 
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管理 DOM 


行测试 


有人玩 Woggle 吗？ 

- t 刀止 常吗? 试试我 们的 Woggle 游戏……它的表观 正如我 们在286页卜. 
预想的那样。 




: r : 帽惑 

■■■ 

fllHBl ] 


Wd)p!]h "PtiZZl^ 

[i 


tabvi** Pu«4' 

<o»n .&<*».» I ^ 


<0^. &«K»i^Mii/cne7 ， 


W (如 1^(122 


WdMlla "Puzzle 

5 MMB 

: wm :， 


…… ^ ^ f.j ii 
个掌淨的珥分。 


i:n i A 

n 1 

pw 4 rH 

a 


« 个舸 # 邾枓律扣利鞏戈表中.斿相在 
地沐扣沐分。 

s 次含 重更 貼续 9 供 重 用 
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自我挑战 


不过还玎认做更多拳情 f 


# 如果有一个定时器给你 60 s 时间，让你在这个指定时间内尽可能多地输入 
所能想到的单词，该怎么做？ 

# 如果选择 一个字 母贴块后只能选择上一次所选贴块旁边的贴块，该怎么 
做？ 

# 一旦使用字母建立了一个合法的单词后，如果这些贴块会被新的随机贴 
块所替换，该怎么做‘？ 

# 除了以上种种，你还能想到能如何改善 Woggle 游戏? 

我伯希望贫•斤可熊地艽穸利芹侪鞏搌的 DOM 、 JavaS - 
cripf 和铁冰。构建最綠的 Woggle , 并在 Head First 
l ^ abs$D M y\ead Fir^i / jax ” 铭坛中按矣侪应芹的在 
以厉; L 个為中我扪会对彔现最出色的应伊扶伊2^。 


鱗 ⑽㈣ 
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管理 DOM 



DOM 镇字游珙 


花点时 N 坐下来，让你的右脑活动 活动。 回答下面提出的问题，并使用答案中的字母 
填出密佶。 


这个方法会创建指定类型的一个元素 


1 2 3 4 5 6 7 8 9 10 12 13 14 

这是 这一章 所构建游戏的名字。 


15 16 17 18 19 20 

这个方法向 DOM 树增加一个元素„ 


21 22 23 24 25 26 27 28 29 30 31 

D 0 M 树就是它们的一个集合。 


32 33 34 35 36 37 38 

这个方法将一个节点替换为另一个节点。 


39 40 41 42 43 44 45 46 47 48 49 50 

这个方法从 D 0 M 树删除一个节点。 


51 52 

53 54 55 

56 

57 58 

59 

60 

61 

















37 58 

3 

33 

39 

16 

15 

38 

45 51 




5 2 21 

25 38 

8 

43 

14 

45 

38 

26 32 

10 


13 16 

50 52 38 

59 

13 

37 

16 

54 

33 

34 9 

57 5 

38 
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练习 



DOM 镇字游珙 

花点时间坐下来，让你的右脑活动活动。 M 答 K 面提出的问题，并使用答案中的字母 
填出密佶。 


这个方法会创建指定类型的一个元素。 

CREATEECEMENT 
~I 2 i 4 5 6 T~ 8 9 1o 12 14 

这是这一章所构建游戏的名字。 

W 0 Q Q C E 

~15 16 17~ 18 19 20 


这个方法向 DOM 树増加一个元素。 

APPENDCHJ) C D 
~21 22~ 23 24 25 26 ~27 28 29 30 31~~ 

DOM 树就是它们的一个集合。 

0 B a E C T S 

~32 33~ 34 35 36 37 38 

这个方法将一个节点替换为另一个节点。 

REPCACECHJ)CD 
~39~~40 41 42 43 44~~45 46 47~~48 49 50 

这个方法从 D 0 M 树删除一个节点。 


R 

E 


0 

V 

E 

C 

H 


C 

0 

51 

52 

53 

54 

55 

56 

57 

58 

59 

60 

61 





T 

H 


E 

B 

R 

0 

w 

S 

E 

R 







37 

58 


3 

33 

39 

16 

15 

38 

45 

51 






T 

R 

A 

N 

S 

c 

A 

T 

E 

S 

D 

0 

N) 





5 

2 

21 

25 

38 

8 

43 

14 

45 

38 

26 

32 

10 



N 

0 

0 

E 

S 


J 

N 

T 

0 

0 

B 

a 

E 

C 

T 

S 

13 

16 

50 

52 

38 


59 

13 

37 

16 

54 

33 

34 

9 

57 

5 

38 
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8 框架乌工興包 



谁也不相信 


i Swlth 先生玎能认 v 

为我 R 是咁他的命令，他说计么我轼 
会齿 付么.不过苓他看到达令圣说节奖金 
上 谁 20幺的遍知不知会怎么 S 。 给他一令教 
糾.谁让他在鉍书节还铪我分邡么繁重 W 
工作！ _ 


命 


命 


所有那些 Ajax 框架在内部到底做了什么？ 

如朵你参与过 Wcbville 的项 fl ， wj" 能 K 少遇到过一个 JavaScript 或 Ajax 框架。一些枢 
架提供了便 利方法 可以用来处理 DOM. 另外一 呰抿架使验证 和发送请求的 I：作变得 
很简单。还有一些框架提供了 -些函 数库， 其中 包含预打包的 JavaScript 屏幕效果。 
不过，该用哪一个抿架呢？如何知道这鸣框架内部到底发生了什么？现在你应该不 
H 是使用其他人的代码……而应，真 iH 控制你的应用„ 


这是新的一章 329 


Download at http://www.pin5i.com/ 





用框架还是不用框架？ 


终子？到现在？ ！你粟为我介绍 jQuery . mooTools . 
Prototype 和所布邡签一浚的 Ajax 椎浆.对不对？我 
玎认不用爯写邡昼儍手乎的 rcqutst . sendt ) 和 request , 
onreadystatechange 溻用？，是码？ 



框架提供了大量选择，允许以不同的（有时更容易 
的） 方式使用 Ajax 。 

如果在 Internet 上通过 Google 搜索 “JavaScript 
framework ” 或 “Ajax library ” ，你会食到相 j 多 + 
同 工11 包的链接。毎个框架会稍有不同、有些非常棺 
K 提供漂克的屏铬效果，如拖放、淡入淡出和转换， 
另外一些框架可能只需-两行代码就能完成 Ajax 请求 
的发送和接收。 

实际上，我们之前毎次引用 utils . js 中的一个函数时, 
就一鱼在使用某种框架。这个脚本所做的是在一个可 
® 用的包中提供通用功能。当然，大多数 m 架的功能 
要史为卡富，不过原 押是一 样的。 


那么应该使用哪个框架呢?更重要的 
使用框架? 


到底该不该 
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枢架与工具包 


(parpen your pencil 


值用楛李的涿© 


要决定足否使用••个 JavaScript 框架来编写代叽是一个歌要 
的问题。请在下面写出你认为应该使用框架的3个原因…… 
另外3出你认为不适合使用框架的3个原因。 

不值用楛字的涿© 


2 . 


2 . 


3. 


3. 


I ®): 我连框架是什么都不知道, 

怎么能回答这些问题呢？ 

: 枢架就是一个 JavaScript 文 
件——或者是一组文件——其中包含 
可以在你自己的代码中使用的 A ft . 
对象和方法。可以把枢架想成是我们 
一直在用的 utils.js 文件的一个.史大. 
更1杂的版本， 


tiiereiore up 

Dumb Questions 

:不过我以前什么框架都没有 

用过！ 

^ : 那也没关系，只需考虑你为 

什么想要尝试使用一个枢架，以及使 
用这个枢架相比你以前的做法有哪些 
好处。然后，再来考忠吋于你以前编 
写代码的做法你真欢哪些方面……这 
痊.就是不使用怄架的原因。 


1^) : 框架和工具包之间有没有区 
别？ 

^: 没有什么差别。怄架和工具 
包在 JavaScrip 〖世界里经常交替使用。 
有痊人可能会这样告 诉你： 枢架是编 
写代码所采用的一种结构，而工具包 
是一个工具焉軚集合。不过，这种差 
别并不适用于异一个怄架或工具包， 
所以没有必要糾缱这个问題。 
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开放话题 


Fireside Chats 

綱 :( 


今晚 话题： Ajax 框架和“自己动手” （ Do - lt _ Myself ) 
JavaScript 关于工具函数、工具包和“自己动手”思 
想的优缺点展开了针锋相对的讨论。 


自己动手 ” JavaScript: 


Ajax 框架 : 

天哪，我觉得你们这些人永远都不想让我上场。 
到底为什么，到了332页了我才刚刚有机会蒋面？ 

行了吧 . 你也是那些 JavaScript 狂热支行者中 

的一员，不是吗？不要框架，不要工具函数，只 
是努力工作，一个 . js 文件里有成 f 上万行代码， 
我说的没错吧？ 


那你和我有什么矛盾呢？我觉得像你这样的人应 
该崑欢我才对。我完成了所有那些常规的、麻烦 
的、烦人的任务，把它们乜装到用户友好的函数 
和方法调用中。 


那又怎样?这有什么问题吗?我甚至看不出有什 
么区别……包装？抽象？ 


你开玩笑吧，对不对？我也是 JavaScript 。 只要 
你愿意，你也可以把框架打开。我的 JavaScript , 
j s 与你的有什么区别？ 


嘿，我们认为需要你的时候自然会让你出现。看 
奍这里，在前面的7茕之后，现在不足:谈到你了 
吗！ 


根本不是那么回事。实际上，我非常支持将公共 
代码抽象到工具方法中，而不是编写甫复的代 
码， 我其至 还非常欣赏为各组不同的功能编3不 
同的 . js 文件。 


嗯，但仅此而已 D 你确实把它们包装起来……但 
是你并非把它 ( n 柚象到不 n 的文件中。实咏上你 
隐藏 r 那些细节。 


嘿，你可以看看我的代叭。 h 需打开 一个 脚本， 
你就能洁楚地知道发生了什么。没有任 m 秘密， 
没有“睹法函数”。这就是我，就这么明明白白。 
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框架与工具包 


Ajax 框架 : 


我一直在看。你到底要说什么，笨手笨脚的家伙? 


朋友，我可提供 f 大景的 选择。 丰富的选择。有时 
某些方法几乎有一百种选择。还有比这 更妙 的吗！ 


噢……让我想想……那么，如果你不知道自己如 
H 完成所要做的事情呢？你试过编写实现拖放功 
能的代叽吗？实现过在图像内移动的代码吗？放 
大和缩小 ra 像呢？难道你 A 的想一切都自 d 动手 
吗？ 


‘ 自己动手 ” JavaScript: 

你右过 A 己吗？从镜 P 黾？ 或者从你引以为奈的 
某个漂亮部位的倒影里？ 

你 n 定不明白！你要査 fr 上千行代码。如采我 
想做的彳 f 怡与你的做法只是稍有一点差别会怎么 
样？然后该怎么办？ 


你以为我想要这些选择叫？谁想去知道一个方法 
的第8个参数是什么？另外这在什么时候才有用？ 


如果这样才能 K 正掌搌 内部是如何工作的，我肯 
定会亲自动手！ 


嘿，我们又不是在讨论原子聚变。有时候你只足 
需要得到一点视觉效果……成者只是耍发送一个 
Ajax 请求。没有必要在 Internet 上花费时_来研究 
这样的代码，这可能 H 是一个初中没毕业的学生 
3年前在他的博 客里 发布的代码。 

不过我相信他宵定很消楚自己在钳什么！ 

没错，另外他现在还在开一辆 “76 Pinto " 货车， 

因为根本没有人聘用他。原因就是他编写基本代 
码实在太慢了！ 

随你怎么说。 
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为什么使用框架? 


parpen your pencil 

^ !\nlntinn 


你的任务是考虑为什么使用框架的原因，以及不使用框架的 
原因。你的答案是什么? 


1 . 不必巧別人 3 经写出的函數鹐写代砝， 
S f ft 用雄宰中现有的代碎 


2 .伢芍钱沒的问 i ? 3 铋写稃李中 的一墊 函數， 
rs 砝玄： i 用 ii 墊焱數（釦蓽 3 绞奄 ( i 样的 
基赵刁供 迻用） P ci 样刁以洱到更多功钱， 

3.稃字中的 代砝得 f ，）？ 更多的测试. ©4 
有曼多的人乜 f 逢用 ( i 个楛麥 3 辦以出现 
6«$的机含更少，相左地 fl 的刑试泛少。 


不 值用楛 李的涿因 . 

1.你不涑楚楛李奋漱侪么。也埒它钱澉珥 
很妗 也芍桡2沒有你的漱(在纹率惠 ， 


2. 柺字刁飩沒苟狨 m 伢#望残 fi 的所有 
选#.所以鼉后 g 秸必硒砰酸你的代炫 
来遠应桮字。 

3. 苟的極穿含隐藏一昼 f 类的概含（本来: J 
稱 a 签 m 念含 m 穷帮助），巧以 如果值 
用柩架你可錄学不到多少房冻。 


楛字还常含;6你考虑絝洌览器问拯 • M 
以不必托心到 栳器！ JE , Fhebx 残 0 peta o 
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框架与工具包 


那么 f 彿些框架? 


H 前有很多流行的框架……其屮大多数框架的功能各有不以下足 
大多数人经常谈论的-些框架。 



Prototype (http : // www. prototype's. oi§) 

P « t ofjrpe 差-个功秸荛 丈的雀 k 

越〒 5 之 " f 攻层; auaScti.pt 工其蚤赵〜 ） 


, QueJj 4*^ JawflScn,,t ^ 
炫蚤戋 ㈠ 的工只笆 2 一. 
芑含 Aja * 蛐求 ..， 

jQuer^ (http: // www. jcjuei^. com) 


jQuery 


scu,t 

其 QU 44 JAVftSctipt 中货供厲攀狄畢0 



nrooroofs I 

whhhhhhbhhhbbP 

mooTooLs {http : // vnootoots. net') 



script. acuLo. us (http: //sctipt. acuLo. us) 


^ooToots (: 



框架通常比底层 JavaScript 语法更新的速 度要快。 

框架由编写框架的人所控制，所以一个框架可能毎过儿 
个月就会发布一个新版本……甚至早期町能几个星期就 
发布一个新版本！实际上，可能在 6. 7个 II 的时间内一 
个框架就会从流行舞台 h 退下来甚至完全从人 ffj 的视 ? f 
消失。 


何是核心 JavaScrip 丨语法和对象 （ 如 XMLHttpRequest 和 
DOM ) 则由一个规模庞大、动作缓惮的标准组织来拧 
制，所以这种语法不会经常改变。你会奍到，最多也只 
坫毎过几年才会有变化。 
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不同的语法，相同的功能 


毎个框架使用不罔的语法完成工作 

毎个框架都使用不同的语法来完成 工作。 例如，以下是 Prototype 中 
的做法，这里要逮立一个请求并指定利用服务器响应做什么。 


系段代碎的蓽 一郝分 IP 籩 
从毋尋到 一个 ^ 


ji f 得到^於 
username ' 的 
x 最， 


(4 ^ Pxotot^pe 

中濃主碲求的 
Aj « 的象: 


^^ nspoit ^ 

^^ otot \ fpe ^ f ) 

靖求的象 。 


function checkUsername() { 

var usernameObj = $("username”}; 


翟务器 iE t 畤 
o ” S “ cc«s 焱盘 


如菜鴻求或畋由 

oYif dilute Si&o 


usernameObj.className = "thinking"; 

var username = escape(usernameObj.value); 
- 

new Ajax.Request( M checkName,php y % { 
method:"get ”， 

parameters: w username= ,f + username, 
onSuccess:function(transport){ 

if (transport.responseText == "okay"} 

p 

$ ( f, username f, ) .className = "approved" 
$ ("register").disabled = false; 
else { 

var usernameObj = ${"username">; 
usernameObj.className = "denied"; 
usernameObj.focus(); 
usernameObj.select (); 

$ (” register").disabled = true; 



然后違 i - 个确求。 ^ otot ^ 
ii 郝分 t 阇圪饵多。 




不 <2莩本代辟暑- 






onFailure: function() { alert (’ .Error in validation. M ); 
})； 



如菜坎态砝不扈 200 .或专出戌） 
萁他问蛀.我们沒笱栊供沣鎭1 
总不过 Pwtot ”* 含4善他公理这 

一神代况。 
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语法玎能不间 . 但 JavaScript 仍是 

一样的 

乍一! J , Prototype 代码似乎与你以前编写的代码大不相同。不过再来 
査看 Mike’s Movies 注册页面 V •期版本的相应 JavaScript 代码。 

function checkUsername() { 

document.getElementByld(^username").className = "thinking"; 
request = createRequest(); 
if (request M null) 

alert ("Unable to create request •”； 
else { 

var theName = document.getElementById(’’username") .value; 
var username = escape(theName); 
var url= "checkName.php?username=” + username; 
request.onreadystatechange = showUsernameStatus; 
request .open ( n GET ,f f url, true); 
request.send(null); 


⑼广 用 ㈣ 越刪 


} 


} 


function showUsernameStatus() { 
if (request.readyState == 4) { • 
if (request.status == 200) { 

if <request.responseText == w okay ”） { 

document.getElementByld( ’ •username") •className 
document.getElementByld("register”）.disabled = 
)else { 

document.getElementByld("username">•className 
document.getElementByld("username"}•focus(); 
document.getElementByld("username” ） •select(); 
document.getElementByld("register">.disabled 5 


} 


: "approved"; 
false; 

: "denied"; 


true; 




) 
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框架提供 “ 免费的"特性 




JavaScript 和 Ajax 框架只是采用新的、不同的方式 
完成 你已经在做的 工作。 

如果归结到代叭，#步沾求就是异步淸求。换句活 
说，在底层， JavaScript 代码仍然必须创建请求对象， 
建立将根据服务器返回的结果来运行的代码，然后 
发送这个请求。 不论 语法如 M 改变，丛本过程都是 
一样的。 

使用框架可能使逮立和发送沾求的策些部分更为容 
姑，小过抿架村你做的 T . 作并没有本质 h 的改变。 
"1 然，要有效地使叫一个框架， n 定需要学习一些 
新的语法。 
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框架与工具包 


tjiere . c ^ 

Dumb 


are no 

Questions 


R ： 你没有提到我最喜欢的框架 
[在这里插入你的框架名]，为什么？ 

^ : 嗯，实在有太多的怄架，而 

且每天还有更多的枢架出現。335页上 
的枢架只是 当前最 流行的 / L 个枢架， 
不过也许你提到的枢架 / L 个月内也会 
进入这个行列。 

不论怎徉，关键是枢架提供的功能与 
你编写的代码并没有本项上的差别。 
怄架只是使功能的实现史为方使，或 
者编写代码时花资的时间更少，也可 

能会增加一些梘觉效果 . 这一点你 

应该很清楚， 

1^) 2 所有框架都会使页面元素的 
处理这么容易吗？ 

^ 2 如果使用一个枢架，你可能 
不会 ffl 大量 DOV 1 方法编写代码.如 
getElementByldO 或 getEle - 
mentsByTagNameOo 因为这签4喿作 
如此常用，大 fftfe 架都提供了史容 
易的语法,如使用$ ("username •”可 
以伴到 id 为 " username ”的元 索。 

R :那么框架用什么来得到元素 
呢？ 

^:正是你未使闲枢架时所用的 
DOM 方法 n $ (" username ”} 会转换 
成一个 document .getElementByld 
(" username ") 调用。乃叶，所返回的 
对象有常规的 DOM 方法，以及怄架可 
能提供的额卟方法。 


R : 那么框架是个好东西.是不 

是？ 

^: 嗯，有呰人使用枢架是因为 

他们不想花时间学习底 ■层 权念。这并 
不好.因为这痊人并不真正理觯代码 
内部到 4 做了 什么。 

不过，如果你使用一个枢架，一定要 
了解 底层的 悛念和代码.这说明，作为 
«序员你的效车可能更高，另一方面， 
也能史有效地发现问题， 

r ^) :这么说框架只是在做我们自 
己己经做了的工作，是吗？ 

^:可以这么说，怄架通常会 
比我们所做的多做一些。它们通常会 
提供更多选择，另卟往往会建立史 
强大的错误处理，而不只是显示一个 
alertOfe. 不过，怄架仍然要建立 
请求并处理响应，还需要使用 DOM 获 
取页面上的元素，这与我们编写的代 
码完全一蛘‘ 

R : 既然我们已经知道了如何编 
写请求和响应以及 DOM 的相关代码, 
所以不应该使用框架.是不是？ 

^: 枢架确实提供了大量便利 A 

ft . 而 i 那些屏幕效果相当漂秃…… 


R : 那么应该什么时候使用框架 

呢？ 

^ : 不好说，使用枢架时肯定会 

失去一定槎度的控制，因为在某些情 
况下它可能没有按你的意愿行事。有 
时，最好是充分地加以控制，自已编 
写你需要的代码而不要引入怄架带来 
浞乱。 

:那么到底怎么做呢？使用框 
架还是不使用框架？ 

^ :这确实是个棘手的问题，对 
不吋？韌开下一页，我们来找出答案„ 


俊要琪解你的代 

3 框笫谀代 
碚冥易子编 s 。 
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我该做什么？ 

使阁 框架还 I 不用框桨？ 

使用框架有很多充分的原因……+使用框架也有很多原因。有些人 
有时会使用框架完成项目，有时則不使用 框架。 这完全取决于具体 
的怡况和你的 个人偏 奸。 




ft 问 的 WdiJLO 人 R 
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在 i6 移砝 


我认为 wooTools 看采很#,不过 
我希望更6}地掌播谙求和®溻。认 
后也许我含值用一个工 ftfe . 不过 
观在还不会用。 


- 实鎳 <本公司的赵4|违 

nm> 
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作出明智的选择 


完全由你选綠 




你确实要完仝拧制代码的每一个方面吗？这很 E 要吗？你足不是 
很想知道 JavaScript 代朽中使 H 1 的毎个函数到底有多高效？你能 
+能接 受小学纠新 I 1 H 、 技巧或技术的想法？如果你的回答是肯 
定的，那 么使用 框架只 会让你 烦恼，带来麻烦。要坚持编写你自 
己的请求，回调和工具 函数,在 utils.js 中构建一个不断 
- 扩展的代码库，而不必每过儿个月就更新为一个新版 

本的 m 架。 


你足不是不太关心链一行内部代码？如果你非常追求效率，希 
望开发出最棒的应用，而只用最少的时间处理错误、不同浏览器 
的不一致性以坆 DOM 的有关问题，那么框架对你再合适不过 r 。 
你 *4 以向 request , send 《 null ) 永远说再见，选择学习一种框架。 
这不会花费你太长时 N ……因为你已经很了解异步请求在底层具 
体发生了什么。 


不论怎样，敁后的选择取决干你。我们认为一定要知道异 步请求 
在底层做了什么，而不论你是否使用框架。这一点很重要，所以 
这本书后面的内容将使⑴告通的 JavaScript , 而不采用任何特定的 
框架。不过即使你以后可能使用某个框架隐 藏具体 工作的细节， 
你学到的知识同样有用。 
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$以言表 


命 



要让你描述未来10年的自己你会怎样做？未来20年呢？ 有时可 能志要随你的需 

求而变化的数据……或者数据会随荠户的耑要而变化。你观在使用的数据也仵 
在几个小时后、几天后或者几个月后需要改变。利用 XML ， 即可扩展标记语言, 

数据能够描述自己。这意味猗你的脚本中不再充斥 / fif 、 elses 和 switchig 句。相 
反，可以使用 XML 提供的0我描述来得出如何使 HIXML 中包 含的数据。这样一 
来不仅能 得到更 大的灵活性，还能吏 g 易地完成数据 处理 。 

鶫則级矛 . ii-t 一- 夕 

},)0OM if 络外留金 ! 
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永远的摇滚 


21 世紀经興稻漶卷土重來 


Kob 的摇淡 纪念品 (Rock and Roll Memorabilia ) 商发展势'又•相当好， 
12经达到了鼎盛。从你为 Rob 构达的 N 站仵 Mh 推出后， 世界各 地众多 
晚客郎在购买他的纪念品。 

实隙上， Rob 得到 f 很多关十网站的很好的反馈，并打算做一苎改进。他 
希窄除了商品的介绍外，还要包含毎个商品的价格，另外冶 空能 够包括 • 
组相艾-的 URL ， 使顾客能够 r 解关于各个商品的更多信息。 


A ◊ o 


Rob s Rock 'n' Roil Mernorabilia 

- - - . ■. _ 

々 • J ^no / /vww ^eac^-srios cooi /boo<s / rt ^a * ； chO9 / nvtnto ▼ 、_• 





Dorc 


_ 二： 


pm ， SROCK ， VR^L v OIDRXBILiA 


Are you tookTg *v : he per^ec: g f ： for : te rock <ar *c» 
your l ： fe? M.ayt>e you 的 an: a go^tar sone h'Siory 
ber nd >t, or a cor.v^rsrjor. p «ce ^or yxr r e»: b s 
讣 ir.df Look ro further! Here you II f-rd all sorts y 
great nenorabdii f ron : he golden age tf rocH ard roU 

Click on an 'n«*e to the left for more de：ans. 


D^scr'pnor. To»vr.shend orce played ： r. s gu‘:ar 
★tvle tvs o^r axe 办 as r ;he st op tav ng t> :s y drunl* : 
ferv ： K 寺 d f ror\ :. 


Pf ce(T56^99^ 


nv ： p, on,^tKiped^a.o /Pete. 1 ownsfieng 


* 个痒兵 t 车一个戒多个 URL . 
lr /1£ *5 ( i 5 *: 玄眘 w 的更多 伐总。 


4 望 # 
S 个$ «g j 
加价格。 
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单值响应 



条器请 ^ XHTMC 
用叫用务 g 


WWfce 的头务器速螂本 ㈠ 的 
用户名和 O 今达 ® 

迖 ' denied » 




没有服务器交互 


; 1 ; 淡 _ 


Mike’ s Jyiovies^i^f^^f 


^ 条 8 # W ( *5 ㈣ (? 一个 

P 



m 

■: 

* __ 

、 .M_] 


笫 7 耷： Wo^le»» 
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v^barpen your pencil 
、‘ Solution 


对干自前为止所构建的应用，它们的服务器响应与 Rob (译 
荇注： 原文此处为 “ Mike ” ，有误）在这个新版本摇滚 N 
站中所希頦的服务器响应有什么不间？ 

费節 为土所有路旁稃舴只衣出— 个响应 …… M (译者 ii : 

原文此处为 “ Mike ” ， 有误）的祺旁 裆要衣 该多个办辗 .. 


服务器如何芨®多值响应？ 

到目前为止，我们使用的所有服务器端程序都只是发回一个数据， 
如 - I 或 “ okay ” ，似是现在 Rob (译 各注： 原文此处力 “ Mike ” ， 
有误）沿空-次发 H 多个数据。 

o 所选商品的一个串描述。 

Q 商品的数字价格，如299.95。 

一组指示商 ri ? i 相关信息的 URL 。 
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r^harpen your pencil 


观在来押注。我们将跟随 Frank . Jim 和 Joe ， 看#谁提出 
的是最佳方案。你认为谁能解决 RobN 站的问题，赢得 Les 


Paul 电 士他 呢? 


XML 是最佳选择„ Frank 会兑。 


CSV 既简单功能又强大。 #你的了， Jim ! 


innerHTML ： 永恒的真理。 Joc>J •是縊家。 


哪一种格式 


i 
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- ^Jjarpen your pencil - 

你还没有真正动手练一练。假设有一个商品的以 t 信息。 

Item ID: itemCowbell 

Description: Remember the famous "more cowbell" skit from Saturday Night 
Live? Well this is the actual cowbell. 

Price: 299.99 

URLs: http://www.nbc.com/Saturday_Night_Live/ 
http://en.wikipedia.org/wiki/More_cowbell 

服务器如何表示这个信息…… 

O ……作为 

的 么 , 

_ 〆 

- - 


O ……作为 CSV (缉咢分福值】？ 

碾务器 4© 的 CSV 含4：! 縳的? 



O ……作为 XHTML 圬段? 


& 沒用 f in«erHT(VIL(rf)XHT(VtL<^ ? 
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数据格式对决 


(parpen your pencil _ 

Solution 你还没有真正动手练一练。假设有一个商品的以 1 、'佶息。 

Item ID: itemCowbell 

Description: Remember the famous “more cowbell" skit from Saturday Night 
Live? Well this is the actual cowbell. 

Price: 299.99 

URLs: http://www.nbc.com/Saturday_Night_Live/ 
http://en.wikipedia.org/wiki/More_cowbell 

服务器如何表示这个信息…… 


O 


作为 XML? 


<?xml version="l• 0"?> 
<item id= M itemCowbe11 M > 


-- 赛吳 JOf 曼用一个诔 3 。 




<description>Remember the famous "more cowbell" skit from 

Saturday Night Live? Well this is the actual cowbell• 〈 /description 〉 

<price>299.99</price> 扣 P u« 郝棄 。 —_^ 

^ - 

<resources> 

<url>http://www.nbc.com/Saturday_Night_Live/</ur1> 

<url>http://en.wikipedia.org/wiki/More_cowbell</url> 

</resources> 

</item> 



将 URL 用， ^ xesoutcesX 秦收通•备个 
URL 分? ，) 故在一个 URL 无秦中。 


♦ 泛 苷筘漓 方 f c 基 k /. XML 、 CSV 和 XHT (^ 格式表•子存兵數対 
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o 


作为 CSV ( 缉咢分«值抒 


9 ^> 


itemCowbell # Remember the famous ’more cowbell 1 skit from 

Saturday Night Live? Well this is the actual cowbell^299. 
http://www.nbc.com/Saturday_Night_Live 
http: / /en.wikipedia.org/wiki/More_cowbe11 

CSV 穿中备场分利用 一个这 

咢分堪 ^ 


o 


••… 作为 XHTML 片段？ 

<p>DescriptionriRemember the famous "more cowbell" skit from 
Saturday Night Live? Well this is the actual cowbell.</p> 
<p>PriceLI$299.99</p> 

<ul> 

<li><a href= w http://www.nbc•com/Saturday_Night_Live/ M > 

http://www.nbc•com/Saturday 一 Night_Live/</a></li> 
<li><a href="http://en.wikipedia.org/wiki/More_cowbell"> 

http://en.wikipedia•org/wiki/More_cowbell</a></li> 

</ul> 
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innerHTML 问题 


O 


达些昱我们 tS 
在* 务器 端完成的工作 • 
1 JXHTML . tt 在 达里… 

达里是…… 


o 



2oe f \1 f ^ (i 
^ i n n e iHT N\L iv 
JiU — ^ 唼务器揉州 T 亂？ £ 务器呍在。 
4 容， 1 存穿鉍 $个 
科 盔 .).€ 趄:夹 〖句 蛀。 


Jill ： Joe , 我不太明臼。这么-来，服务器端的人就 
要做很多格式化工作了。 

Joe ： 但是他们 I 有商品的所有数据，对不对? 

Jill : 嗯，、然……不过服务器端程厂 f : 员井不想悅人 
XHTML , 而且这正是他们中很多人之所以选择转向 
服务器端汗发的主要妝阁……就是闪为服务器端幵 
发小必考虑 XHTML 。 

Joe ： +过， CSS 不会有太多变化，所以 XHTML 也 
不会经常改变。 

Jill : 哦?难道 XHTML 有时会改变吗? 

Joe : 嗯，没错，有可能……但不经常变。只有当我 
们耑 要增加-个标 Id ， 或者为 CSS 增加-个 ID 时…… 

Jill ： f 万別这样。你不会让服务器端程序员编写 
XHTML ,然后再对它总做修改吧， 


Joe : 嗯,听起来很难，但我想并不那么困难。我认 
为 innerHTML 作常简单…… 
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XML 请求与响应 


iwiierHTMlR ffl 的窖户 

端來说简单 

从客户端角度看 ， innerHTML 使用非常简单 9 只需要从服务器得到 
个 XHTML 响应，然后利用元桌的 inncrHTMU _4 性把它放人 Web 页 
而。 


function displayDetails 0 { 


if (request.readyState == 4) { 
if (request.status == 200) { 

detailDiv = document•getElementByld("description"); 
detailDiv.innerHTML = request.responseText; 



问题是，服务器必须 做大破 额外工作。服务器+仅要针对应用请求 
得到适当的仿总，还必须采用特定于应阁的裟种方式对响应进行格 
式化。实际 h , 这种格式吋能只特定于网站上某个单独的页而! 




一个 m —砷祙 t 格 
式. 不过找 的仔何在用 
部刁以叇用 ii 个畴在 



1=1 ^ 



柃式特装的 


| <?nni v«iaior>») 

< !*•• t > t ： eMr<c»«ibel 1» 

I <<l*ac t tqn> » —ww fc T th* 

If«w?uv wore cooteil skit fro* 
S«lur<ft*y M»U # 

I <►»• i« r 切 «Ctca«b*iI .*/ 

I (piion> 

<pr fpt te»> 

< tmwcmternn* 

«U 11 /vw«. nbr .cw' 

94tu( i«y > 

«uiI>ntt0: *7.n 
lavij/wiii 




( 感 mu ， *or« oo«A«ll alut 

3«tiitd»y Nii|ht L-iw? 
W»?-j *t.k9 ta I art uni 
cu^wi ^. </p> 

<p*^r*c» 

< * < »<a hr*f'Kttpc 
ruM.'s«twrdfty 

卜 》 ?p: f ftntm I 
S^tuttfay Mtqht 
< 1 ! " 
t . .wife • . oiumi 

riMtw 11 , 



i 个磅在®注用子一个 
0常鞾定的 XHT 亂毋 fi 
的子系一个否 fj . 
f 龙一个 宄全不阕的 
XHTMCq^-* - 


扣并侪是―个豚旁芻辨扞矣人员……您希望*狎—种响应？ 
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CSV 看起来很简单 



你达个 CSV 方轚玎认帮 我争得 Us 
Paul 电吉铯，达种方* 速&相 g 怕。我 W 
打电活绐®务 g 绡的《序8,他们说发送 
csv 响成没问 


Frank ： Jim , 我不人肯定，但我总觉得这种 CSV // 
案有点问题。 

Jim ： 是叫， H 是 W 为我就快完成 

Frank ： 不是的。行上去……我不太确定，但这是 
不足不太灵活？ 

Jim ： 什么意思?你看这里，我的代码把服务器的响 
以交给 M 调，然后仵页面上更新商品详细信息 。 M 
然代码有点於，但这都是相当基本的内嵙。 


Jim 的 CSV 方柰 

找 <5 抹 


function displayDetails() 
Fnmfc 仍 4XML 的典 U if (request. readyState 


{ 


t # 专 


= 4) 

if (request.status == 200) { 

detailDiv = document • getElementByld (’’description’” ； 

defen-ilDiv. i - ftn er il 乎 M L ■ requeat. re3pongeT<?Mt t -• 我们不爲 f 違用 


达个代砝去软 *5 光铂 
(| lS pU»0«taitsO 戊用作 

和的 M 笱无棄。 


// Remove existing item details (if any) 
for (var i^detailDiv.childNodes.length; i>0; 
detailDiv.removeChild(detailDiv.childNode 

} 


打 HTML 


—)i 



t? 光 . f*)°i )>* // Add new item details 

^ var response = request.responseText; 


迻用 ( i 咢分堪 


var itemDetails = response • split (•’，"> ; 
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XML 请求与响应 


var descriptionP = document.createElement( H p M ); 
description?.appendChild( 

document.createTextNode("Description:" + 
itemDetails[1])); 

detailDiv.appendChild(description?); 



批 V/ 心〉 


var priceP = document.createElement( M p M ); 
priceP.appendChild( 

document♦createTextNode("Price:$" + itemDetails(2))); 
detailDiv.appendChild(priceP); 
var list = document .createElement ( f, ul M ); 
for (var i=3; i<itemDetails.length; i++) { 
var li = document.createElement ( M li">; 
var a = document.createElement( M a M ); 
a.setAttribute("href”，itemDetails [i]); 
a.appendChild(document.createTextNode(itemDetails[i]>); 


6 


戏下來坩加另一个 < p >. 
萁中苞含眘兵的价格。 


下承把 URL 5 斤 X — 个 
是璆列表中的列表砀。 


落个 URL 汝在― 

加々 -个 < tl> _ 

•••••• 



li•appendChild(a) ; 
list.appendChild(1i); 

) 

detailDiv.appendChild(list); 


……播后枵 < t «> 坩加利一个 
<“ o 中…… 



. 最后这个列表放在知 

<仏> 中。 



的，这 ^ ^ ^ ^5 thumbnails. fs^p 

奴代老 t^displa^Details() z 





thumbnails.js 


你认为为什么要从后向前循环删除 details <div>^ 
的现有元素，而不是从前向后循环刪除？ 


\ 7 A f 芍以试«反方分（认葡免后） 

IA 赚綱现継 


你现在的位置 ► 355 


Download at http://www.pin5i.com/ 







CSV 运行测试 


一 行测试- 

下面自己测试 CSV 方案。 

从 Head First LabsN 站下栽访 9 章的示例.打开 thumbnails . js 做两处修改。 


❶ 

o 


按 354 页史新 displayDetailsU 。 



在 getDetails () 屮，把服务器端脚本的 URL 改为 


getDetailsCSV . php 。 

现在尝试运行这个网站。一叻 iH 常 W ? 


砉的下戢代砝中£ 衫一个 
达 GTCSV /3 F 不基详 j 本的轚务 
器琏躑本。 



IU 嶋御 




57 办 ' 


r i I L9(» 


to Vr*.f 


^rrr. 


MU' 


f Ir^oci 




4 £ 來根好 . 

(* f ^ 眘奂介绍. 
价格扣 URL 列表。 
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XML 请求与响应 


tjiereiiire no 

Dumb OiiestiQns 


R : 请再解释 一下， 什么是 

CSV ? 


JavaScript 可能会不正确地分解数据， 
显示或 解绎軚 据时就会带来问題， 


实际上， CSV 就有点危险，因为商品 
介绍中很可能包含迫号1如菜确实有 
迫号.最后会根据这个这号分解商品 


|^): 那么 childNodes 呢？这又是 

什么？ 

: childNodes 是每个 DOM 节 

点上都有的一个属性，这个属性返回 
该节点的所有子节点的一个啟组.所 
以，利用这个属性可以完成很多工作。 
例如，可以得到一个元索的子节点并 
迭代处理或者将它们刪除„ 

R : 那么为什么要从向后前迭代 

处理 childNodes 数组呢？ 

^ : 这里稍有点 技巧。 下面给 

你一个提示，让你有一个正确的忍 路： 
调用 removeChild () 时，提供给这个 
方法的节点会立即从相应 5 C 节点刪除。 

这也说明，所刪除节点的所有引用 

-比如说在一个包含元素子节点的致 

组中-都必项 史新。 由于所指向的 

子节点不再存在，被刪除的这个节点 
之后的所有子节点就必須在彀组中上 

因此，如果从前向后迭代处理 
childNodes 之类的致组并相应地刪 
除节点，会发生什么情况？ 


^ : C S V 代表迫号分隔值 

( comma-separated values ) „ 只是久示 
多个值放在一个字符 率中， 各个值之 
间用这号分隅 a 

1^) : 我还听说过 TSV。 是不是与 

此类似？ 

^ : TSV 是指 Ub 分陆值 （ tab - 

separated values ). 其基本思想是一 
徉的，不过是使用 tab 字符而不是这号 
来分坫各个值。实际上，也可以使用 
你希3!的任何字符来分隔各个 值：可 
以是竖线（I )、星号 （*>, 或者任何其他 
不常用的字符。 

R : 为什么熏要使用不常用的字 

符来分隔值？ 

^ : 如果使用很常用的字符，比 
如点号或某个字母.你的 ft 据中很 
有可能会出现这个字符。这徉一来， 


描述，这会导致各种各蛘的问题< 


: 是不是因为这个原因所以不 

应使用 CSV? 

:问得好， Frank 、 Jim 和 Joe 还 
在争论 CSV 的利与弊.不过你完全可 
以把这痊迫号换成是其他字符，并修 
改客户代码.从而枨据这个新字符而 
不是这号分解字符串 4 至于是否应当 
使用 CSV , 可以继续读后面的内容…… 

1^) :什么是 selAttribute()? 以前从 
来没见过这个方法。 

: setAttributeU 会在一个 
元素上创建一个新晷性。这个方法 
取两个参* t :属性名和属性值。如 
菜不存在有指定名的铢性，就会创 
建一个新属性。如果已经有一个同 
名展性，这个属性的值就会替换为向 
setAttributeO 提供的值， 






你认为 h —页 Frank 提到 CSV 不太灵活是什么息思？ 
增加新类型的商品时， CSV 格式的服务器响应会带来 
什么问 S 吗? 
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XML < 艮灵活 


。/ i 簷.我 sr 认从*务 器得到 XML 袼式的葙品洋细馆 
患蚂？ X 然 我笮* 落后.不过我还是认为邡种 CSV 方 
轚好佴有点问雄。希望达个 XMLte 本的 g 用能冬怕 

运行 起采。 


Jill： 当然， XML 很容砧。服务器端杩序员在这方 
面不会有任何问题。这肯定比 XHTML 好得多…… 

Frank： 没错，我听说 Joe 还在用 XHTML。 难道服 
务器端程序 M 不能给他提供 XHTML 响应呜？ 

Jill: 嗯，也许可以,但是没人想这么做。在服务器 
端处理 XHTMLm 麻烦，它一直都在变。 

Frank： 你知道的， XHTML 就是一种 XML, 是不 

是？ 

川I :对，但很多人和应用会使用 XML 。 如果处 
理有指定 id 的某个 <div>， 或者只使用 <p>ifij+ 用 
<br /> . 这太没劲了。 

Frank： 別开玩笑了。嗯，我得重新写我的回调，不 
过 XML 响应准备好时请告诉我，好叫? 


0 



J 山从* 务器揉译 
度洽出一昼違:义。 


厶在编移世脣中 
扣当奢妒弟％ 
持式作出响应, 




问 


t^reiare no 

Dumb Questi 


9 ri 8 


你是什么意思？ XHTML 就是一种 XML ? 


^ : 一钟 XML 就是指 XML 的一个特定实现.定义了莱赉元素和 
美性。所以 XHTML 使用了 html 、 p 和 div 等元素，然后结合一些爲性 
和文本值使用这痊元素. XHTML 不能建立新元素，而只能使用已经定 
义的元素。 

利用 XML 則可以定义新的元素 有时这你为 XML 垌汇表，从而能恨 
据你的需要扩敉 XML 。 这就是为什么 XML 如此灵活的 原因： 它可以改 
变以适应所表示的鼓据， 
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XML 堉求与响应 


使用 POM 处理 XML, 

就儳处理 XHTML —# 

由千 XHTMLR 是 XML 的一种特定实现，所以完全可以使 H 1 DOM 来处 
邱 XML 。 实际 h ， DOMiii •初就是设 U * 用来处理 XML 。 

史悴的边，用来与服务器通信的请求对象 有一个 祕性，可以返 1"1 

DOMW 版本的服务器响应。这个属性名为 responseXML ， •可以如下 tes Ponse ){ fy\i g ^ ^ 

使用。 本““ 

var responseDoc = request.responseXML; ^ — J 


对十像你这样冇经验的 D 0 M 稈序 W 来说， XML 、 
X HTML ……应该没有太大茇別。你要完成如下两个作业。 


^^rpen your pencil 


对 F 服务器向 Rob 应用发回的 XML 响应(响应如卜' 所示) 
个 DOMW 。 


_出 • 


在 thumbnails . js 屮编写你的 display DetailsOly ] 调，使川 DOM 得到服务 
器响应的各个部分，并在 Rob 的网页 h 3 i 新商品的详细佔息。 


<?xml version= f, l. 0"?> 
<item id= "itemCowbe 11 •’> 


器的匹紀 ：> 


<description>Remember the famous "more cowbell" skit 
from Saturday Night Live? Well, this is the actual 
cowbell• 〈 /description 〉 - - --- 

二; ！ _ — 个 AfctijidMijjbptic * 无棄 



<price>299.99</price> 

<resources> 

<url>http : //www.nbc•com/Saturday_Night_Live/</url> 
<url>http://en.wikipedia.org/wiki/More_cowbell</url> 
</resources> 

</item> 


\ 奴 

裉务器笱以 个商兵 
邕送乇聲多个 URL 。 
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H#DOM 


(^harpen your penci 
、敲 Solution 


对丁像 你这样打经验的 DO M 程序 W 来说， XML 、 
XHTML ……应该没冇太大差別。你要完成如 f 两个作业。 


对 T •服务器向 Rob 应用发回的 XML 响应(响应如下所示），豳出一 
个 DOMW 。 

<?xml version="l. 0"?> 

<item id = M itemCowbe11 M > 

<description>Remember the famous "more cowbell" skit 
from Saturday Night Live? Well, this is the actual 
cowbell.</description> 

<price>299,99</price> 

<resources> 

<url>http://www.nbc.com/Saturday—Night Live/</url> 
<url>http://en.wikipedia.org/wiki/More_cowbell</url> 
</resources> 

</item> 
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XML 请求与响应 


在 thumbnails.js 屮编与你的 displayDetailsOM 调，使用 00 \ 1 得到服务 
器响 ;.V: 的各个部分，汴在 Rob 的网豇上更新商品的 if 细信息。 


function displayDetails () { 

if (request.readyState == 4) { 
if (request.status == 200) { 

var detailDiv = document.getElementById("description"); 

// Remove existing item details (if any) 
for (var i=detailDiv.childNodes.length; i>0; i ― ) { 
detailDiv.removeChild(detailDiv,childNodes[i-1]); 


吞 45 本染的 々多 

淡 以 54 _ 




tut, OOVI 

树衫式的嘁在。 

V-- 

髡后轉 f _) 真第一个孑无 
舞： ii 基一个亡本爷 
魚。 由此 . f .f (% i)a 

尸 

价珞也栗用 罔样的 
样式： 項 fHi 无畢 . f 
择它的 x 参■子无柰.轉 


i f Sf ) 在子如何让這輋 t 
嚷务器的碭盎。 


9以珥到蚵夯<“,0>无 
素. 4蛘 £7. ii Jf 5 — 
个<“^>无縈 


// Add new item details 

var responseDoc = request.responseXML; 

var description » responseDoc.getElementsByTagNanie("description") [0]; 
var ctescriptionT^xt = description.firstChild.nodaValue; 

var description? = document.createElement(p); 
description?.appendChild( 

document.createTextNode("Description:" + descriptionText)); 
detailDiv.appendChild(description?); 

var price = responseDoc.getElwnentsByTagNaine( M price M ) [0]; 
var priceText = price.firstChild.ncxleValue; 

var priceP = document.createElement(p); 
priceP.appendChild( 

document .createTextNode <"Price: + priceText)); 

detailDiv.appendChild(priceP); 
var list = document.createElement (ul); 

var urlElements » responseDoc.getElementsByTagNaxne(url); 
for (var i=0; i<url£l«ment8.length; i++) { 

var url = urlElements 【 i 】 •firstChild.nodeValiM; 

var li = document.createElement; 
var a = document.createElement("a"); 
a.setAttribute("href", url); 
a.appendChild(document.createTextNode(url)); 


li.appendChild(a); 
list.appendChild(li); 

) 

detailDiv.appendChild(list); 
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XML 运行测试 




运行测试 


现在来测试 XML 方案…… 

打开 thumbnails . js ， 两做两个攸改。 

0根据36丨页上所示 XML 版本的 M 调函数更新 

displayDetailsO 。 

在 getDetailsO 中，将服务器端脚本的 URL 改为 
get : DetailsXML . php 。 

XML 版本的 Rob 仵线商店 T 1 起東怎么样？ 


%oo s ^ock n Rol Mfrwabi >4 

^ 0 ^ OOQ<» ** 4 *.*» <0 • 


Q. 


f i 去耷 CSV 豉參乐 
相似，不过 ( if (受用 
■5观1 扣 oowi 。 
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XML 请求与响应 




^ ^ ……达整着起采邾不错。 ^ 

CSVS 6 本迷度很怕 〖 不 过， 在宣布 获胜者之前，我 
还奚钕一*溻螫……菘客希望浔到毎令商品的吏多 
特定《患。 对子掐 涑纪念 a . 玎能要个艺本宗名 
和乐队名；对子乐器，玎 能要笮 一个制 逭葙和 出厂年 
份。 s 漼闷埋不大吒？ 


如果向服务器请求 个 吉他的详细信息， 
会得到制造商和出厂年份。如緊是衣物呢？ 
会冇制造商佶.&，当然还会打一个衣服尺 
•1。对干乐队，会得到一个乐队名，可能还 
冇乐队中拥朽纪念品成与纪念品有災的耶个 
成员的名字。 



…浏览器把你的 HTML fi •做达一个 DOMW 时， Wcbi 刘览器会把所要处 
押的 X M L fl 动转•换到 I ) 0 M W 屮。 


……吋以汴•个 JavaScript 涵数屮处理多个 DOMW 。 例如，可以 i 矣取 
一个 XML DOMW , W 外还能 it 新一个 HTML DOMW , 这作以 |rfl 
时进行。 


H T M L ;£桌和 X M L 元桌邡 U 足 DO M 屮的元尜 Ti 点 。X M L 戈喂 
和 HTM L 类吧没 A 任 MK 別，节少在 DOM 处理方 ifli 如此。 


本 . respunseXMLtlift 总足-个 DOM document 对染 

即使这个耐象 H 坫•个 / C 素，成荇 U 足•个文本冇点。 
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XML 相当灵活 


} o< vi ^ ^ 

iKnetHTWL'*'' 


Frank : 嗯，听起来 有点 M 题。 

Jim ： 这还不算太楢。除非某些情况 K 有多个值，比如那 
咚 U R L ,所以我想虹个类别前可能耍有一个特殊卞符来 
指示这迠一个多值戈別。 

Joe ： 听荇，朋友们.我希望你们能 看看一 




Jim ： 我觉得我能做的就是假设每个值都蛙-个类別， 
4 ll “ Description ” 或 “ Price ” 。 各个戈別之 dWi 就足 H 
体的类別值，如义+描述或 399.99, 或荇其他值。 




Joe : 嘿，我有个主怠。你们知道，我在做一些 研究- 


- 驗編 


Jim : 嗯,我也在考虑 • 


你并； r •总戧扶前沪筵 
少勝旁蒭得到的数辗 
有 X 样的铐构 0 
卽谀沪技，洚种柃式 
也可熊佘玖奕……运可 
M 矣生在任何时刻 a 


Frank : 吨， Jim, 这太糟糕 r 。 这么行来， Rob 最 fe 的这 
个改变确实很麻烦。 

Jim ： 没错，确尖如此。不过除此以外我还能怎么办呢? 



炙1««!我现在得贫写我的® 涓？。 我的所 
笮代 铒坊是按裔品介绍、价梏和一个 URL 列 
在采缟写的。 


- S, 


Frank : 对,我也得做很多修改。不过,我在想-个问 
独 …… Jim. 你打兗怎么用 CSV 处押.这种变化的响应呢? 
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XML 是自描述的 


XMI II ) 摊逑的 

XML 有一点很特 别悴： 你可以创违你自 d 的 ㈤ 汇表。 
XHTML 就是一种 XML 词汇表，专门用于 WebM 示。不过, 
现在 假设畨 要一个 试汇表 来描述商品，如 Rob 在线商店中的 
商品 • 


是这种格式不能锁定为 〈 price 〉 或 〈 resources 〉 等元素， 
因为我 ff ] 希望每个商品能定义它自己的类別。可以使用以 F 
元素 


素。 a 

的容器.杖沭 
XHTMC i 碑中 
的 无 . 。 


<?xml version= f, l. 0"?> 
<item id= w item ID"> 
<category> 


吋子 tf $ •子的备讳分作总， 
< c * te f otf > 无豪 fe 含5甸在 
4的杉荃和免。 


<name>Label for this category</name> 

<value>The value to display for this category</value> 


</category> 

<category> 

<name>Name of the next category</name> 
<value>Next value</value> 

</category> 

〈category type=’’list M > tr 

<name>Name of multi-valued category</name> 
<value>First value for this category</value> 
<value>Second value for this category</value> 
</category> 

XML gw 攉典 f 鐾电含多个 < cat(?50 , y > 无棄 

. 戧打不必知迮到 4 冇多 少个类 fj. 也不來客 

</item> 砝笏知迮这 签类糾 40 L 


« 个 catepty 夯一个 

< n o 州 e 〉办 一 个 

所龙 $ •子的 5 休數 
邛。 
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XML 堉求与响应 


「 ^J^arpen your pencil 



以下足 Rob 商品数据库中的另外一些数据。 

Item ID: itemGuitar 
Manufacturer：Gibson 
Model: Les Paul Standard 

Description: Pete Townshend once played this guitar while his own axe was in the shop having bits of 
drumkit removed from it. 

Price: 5695.99 

URLs: http://www.thewho.com/ 

http7/en.wikipedia.ofg/wiki/Pete_Townshend 

如 M 使用 h — 页的 XML 格式表示这个商品的 i 羊细佶息？ 
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^Jharpen your pencil 
Solution 

以下是 Rob 商品数据库的另外一些数据。 

Item ID: itemGuitar 
Manufacturer: Gibson 
Model ： Les Paul Standard 

Description ： Pete Townshend once played this guitar while his own axe was in the shop having bits of 
drumkit removed from It 
Price: 5695.99 

URLs: http://www.lhewho.com/ 

http://en.wikipedia.org/wiki/Pete_Townshend 

你的任务是使用 366 页上的词汇表用 XML 表示这个信息 0 

<?xml version= w l.O w ?> 

<item id="itemGuitar ”〉 

<category> 

<name>Manufacturer</name> 

<value>Gibson</value> 

</category> 

<category> 

<name>Model</name> 

<value>Les Paul Standard</value> 

</category> 

<category> 

<name>Description</name> 

<value>Pete Townshend once played this guitar while his own axe 

was in the shop having bits of drumkit removed from it.</value> 
</cateqory> 

<category> 

<name>Price</name> 

<value>5695.99</value> 

</category> » — 

〈category type=.’ list ••> 

<name>URLs</name> 

<value>http : //www.thewho.com/</value> 

<value>http : //en.wikipedia•org/wiki/Pete_Townshend</value> 

</cateqory> 

</item> 


URUi — 个表. M 以领把类叫的 


n . 。，菜缡入类 _ 
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E 站 MSe 


该是大结局 f 《乍 少对 于现在 ifrid ) 。你的任务足利用你掌捤的 DOM 、 
服务器端 XML 响佐以及前儿 U (有关这种格 A 的知识并综合这些知识来完 
成以下工作。 


修改 W 求 URL 来使川 getDetailsXML-updated.php 。 这个叫本也放在从 
Head First LabsN 站 |、'我的本 G/f' ： 例代 Pi 中。 


東新编写 displayDetails() 回调，使用我们前面分析的 XML 词汇表。要 
id 住，对 T - 不同的商品可能有更多——或更少——类别。另外还要处 
理那些列表类别。 

完成测试! 一旦保证•切£常运行， 翻开下 一页，申请得到 Les Paul 电 
吉他(至少我们希望如此）！ 


tiiereiore n © 

Dumb Questions 


I 1 ®) : 这么说. XML 的重点就是它 

能描述自己？这一点并不总是那么有 
用吧…… 

^ : 实际上，自描述性在很多 

情况下 都非常有用，比如说这里的 
Rob 在线商店.能够针对你的具体止 
务定义元素和结构，这会非常方便„ 
更棒的是， XML 是一个标准，所以大 
家都如道如何处理 XML 。 这说明很多 
裎序3都可以使用你的词汇表，包括 
在客户端枝序和服务器祺 裎序中 沃用. 


I 15 ):难道不能建立自己的数据格 
式吗？这样不是更容易吗？ 

^: 最初看上去可能如此，但 

是专用軚据格式——也就是你为自己 
使用而建立的格式——可能会导致很 
多问題.如果你没有提供相关的文档， 
人们可能不记得它们如何工作。如果 
情况有变化.則需要确保一切都是最 
新的，包括客户端、服务器端、敫据 
库，文档……这可能很让人 头疼. 


1^) : 那好.我知道了为什么应当 

使用 XML ， 但是当我们开始声明元素 
名时难道不会变成一种“专用数据格 
式吗~ ? 

: 不会，绝对不会。这正是 

XML 的妙处：它很 灵活。 服务器和客 
户需要查找相同的元素名，但是通常 
都能在运行时确定。这正是自描述的 
含义。 XML 可以用它的元素名和结构 
来描述自己。 
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两个 DOM 树 



SoivtiOH 


该足人结 W 了（至少对于现在而言）。你的任务是利 fll 你掌捉的 DOM 、 
服务器端 XML 响砹以及前儿页有关这种格式的知识，完成一个更新版本 
的 displayDetails() 回调函数。 


function displayDetails() { 

if (request•readyState == 4) { 

if (request.status == 200) { 

var detailDiv = document.getElementByld(description); 

// Remove existing item details (if any) ^ 

for (var i=detailDiv.childNodes•length; i>0; i ― ) { 
detailDiv.removeChild(detailDiv.childNodes[i-1]); 

} 


这耷前 兩 _ _ ，芒 



// Add new item details 
var responseDoc = request.responseXML; 

var categories = responseDoc • getElementsByTagName ( f, category H ) 
for (var i=0; i<categories.length; i++) { 
var category = categories[i]; 

var nameElement = category.getElementsByTagName( M name M ) [0]; 
var categoryName = nameElement.firstChild.nodeValue; 
var categoryType = category.getAttribute( M type M ); 

來看泉番 I 一 if ( (categoryType == null) || (categoryType ! = ,, list M )) 

个列表。如 I 

var valueElement = category.getElementsByTagName( M value") [0]; 

不 4 …… 




. 保后 封 

莕个类糾的名 



<5 tp * 愚饯成 
老 t » p * 化不 

4 "list" ^ 
矣树 • 


var categoryValue = valueElement.firstChild.nodeValue; 

document. createElement ("p •”； 
var text = document.createTextNode( 


.6*J var p 

< 一 个 < P > . 

用炎 f ') 名扣 （t 

增加相本 一^ categoryName + ":” + categoryValue); 


370 第 9 章 


Download at http://www.pin5i.com/ 







XML 谓求与响应 


p.appendChild(text); 
detailDiv.appendChild(p); 


这个代 铥铗公 






else { 

var p = document. createElement ( f, p w ); 

p.appendChild(document.createTextNode(categoryName)); 
var list = document.createElement( n ul M ); 
var values = category.getElementsByTagName("value ”）； 
for (var j=0; j<values.length; { 



吋子 《 个 a . 分列一 ^ 
令-个乇埤 fi 表 \ 、 
(<“ c >) 缯知一个 


var li = document.createElement( M li M ); 
li.appendChild( 

document•createTextNode(values[j].firstChild.nodeValue)); 
list.appendChild(1i); 


detailDiv.appendChild(p); 
detailDiv.appendChild(list) 


将列表杉.拯扣列表本身坩 扣到 < div> z 


} 



0 


o 


扣他的 CSV 方 t 代况罨起來不太姑 。 
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- 琢 1 If 行测试 


测试这个改进后更灵活的新 Rob 页面， 

史新所冇代码后，下而就来进行测忒，向 Rob 展示我们的作品。现在豇 ifii 如下。 

^这茗 fS ffl 時电 
州 o* taiis0 硪象基 
盘中的 URL 

o 


O o O 


<09 s ^ock n' Ro I Me**»orak>tna 





VI ： )FLM3lll\ 


J ^ WWW ?OC<i -Ht' 


you look r.g *y : prfw. % 4 \ *or :te fX»« *9r >r 


yOK/r I ••ybt * 〆 •• • |^ ：»r wn « bV.ory 


&»t .• V t ；or vrft** ：< p »ce # y yOw-r r ， rfc , . t i 


^ < Lee* no \r:rt* yot ii *r<j ill \or.t cr 
grer. ner>ora«)i J # ror- to<de' •於 y rxk ai d foil 


G<ck on «n 


：0 the r*i *w mo*e 






W « rw # » C：wfer GtSOr 

»*odei L#i »»k» S:n Jr J 


D*sc.f p ： or ?t'.w To^riffr 3 arc ， played ^ ：«r 

«*»r »e M OMr a>e tr^p r.jv r g b^.i y drwnkt 

rer\>ed "on : 


Prxt W 






顯獄 


r - r.p 办办内 •，麴 f a iDn 

f*.：p >r *«pr<)«:>rg I 


Pr'.f J 


Cc^e 


•:象亮…… 不沦 XML 黾 
a . 戏们的贡乇部 
含 出來。 


多 2 盎邛达秸五 4 
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欢迎尝试这一周的“选择哪种数据格式”，你要确定对干以 F 5 个例子哪种数 
倨格式敁适合。要 注盘： K •中打苎坫请求，有呰足响应。況你奸运！ 


m 

•■^xAJgyyot^.> km 


薩 


文本还是 XML 


2007 年的 
10 大 iTunesT 
戥 




H 


请求今夭出 
兵的 house 
blend 咖吻 


用新内容更新 
■ 杂志 


大众汽$1的 
镙仃个数 




"""" ^ 

£1 


揸 F 采祅 "When 
It Falls " 游戏 


參 


參 


# 


參 


# 


* 


# 


# 


# 


# 


t*JL 

vTS 

▲ 
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还有竞争者 •.> 


0 


潘起采很不铐，我 苓不及 别人？。 
Frank , 我舂欢你的 XML 方法。所吆, 
Les Paul f 他&终8归- 



清苓一7。在你在給出邡拕吉他之 
«. 我还布些东甚想让 你蚤看 。清 
你飧完第10 帝后爯 傲决定…… 


R < j 6 的只〜… ：,' 

振中金 • 


Joe 在饮什么？ 

imierH 丁 JVi 厶怎么3 ? 

他打算怎样你弗拂 ^ ML ? 

要找出运些洵 |g 的考寡…… 

读 J5L 第/0章 


o 
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镇字游珙 

花点时间坐卜•来，比你的召 肭活动 活动。回答下面提出的问题，并使用 
答案中的字母填出密佶。 


最初版本把预定格式的 XHTML 放在这个属性中。 


123456789 
向 detailDiv 增加一个<1)1*>元素来完成这个工作。 


10 12 13 14 15 16 

请求对象的这个属性包含服务器返回的文本。 


17 18 19 20 21 22 23 24 25 26 27 28 

请求的响应在这里生成。 


29 30 31 32 33 34 35 36 37 38 

浏览器把 XML DOM 放入这个对象的一个属性中。 


39 40 41 42 43 44 45 

这是这一章中客户的名字。 

46 ~47 48 ~" 
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练习答案 



镇字游珙 

花点时间坐下来， il : 你的右胎活动话动。回答下曲提出的问纽,并使用 
答案中的字母填出密信。 


最初版本把预定格式的 XHTML 放在这个属性中 

JNNERHTMC 
1 ~2 i ~ 5 6 7 8 9 

向 detailDiv 增加一个<^>元素来完成这个工作。 

FORMAT 
"To 12 13 14~ 15 16 

请求对象的这个属性包含服务器返回的文本。 

RESPONSETEXT 

17 18 19 20 21 22 23 24 25 26 ~27 28 

请求的响应在这里生成。 

SERVER-SJDE 
"^9 30 31 32 33 34~ ~35 36 37 30~ 

浏览器把 XML DOM 放入这个对象的一个属性中。 
REQUEST 

~39 40 41 42 43 44 45~ 

这是这一章中客户的名字。 

ROB 

~46 47 48~ 


X 

Ns 

C 


S 


V 

E 

R 

B 

0 

S 

E 

27 

8 

9 

1 

44 


32 

4 

39 

48 

21 

35 

4 


B 

U 

T 

F 

C 

E 

X 

3 

B 

c 

E 



48 

42 

28 

10 

9 

40 

27 

36 

48 

9 

30 
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2007 年的 
10/ciTunesT 

戥 


㉗用 


©4 杂车佟可秸朵趄畸 
化作& ， 科 WXML 也 g 
秸是7痄的！择 3 、 


辈个致芳用诛太 
本象矛&含1 . 
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JavaScript. 对象还有记法，哦，天哪！ 

如果需要 HlJavaScript 表对象，你就会爱上 JSON , 也就足 
JavaScript 标准对象 iti 法 (JavaScript Standard Object Notation ) 。 
利用 JSON, 你能够用文本和一些大栝号表示复杂的对象和映射。 
更阵的是，可以从其他语言（如 PHP 、 C# 、 Python 和 Ruby ) 发送 
和接收 JSON 。 不过 』 SON 作为一种数据格式到眹怎么样？请翮开 
下一页 …… 
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数据格式之争 




Jim 


Joe 

货 s 法。 



Joe , 我不知 道你笮 什么新想法，不过我的 
XML 方索是最# 的。你没潘 到达迗行锊多 
i }^7 55£奩无瑕极！ 


Joe ： 我想，关于“雀疋 瑕疵” 我们可能有不 H 的定义。你要处 
理两个 DOMW, 而且要处理服务器响应屮的空白符，不是吗？ 

Jim ： Frank , 他说得对。你检査过空白节点吗? 

Frank ： 没有，+过，增加这-点 很容易 —— 

Joe ： m 你的代码也会更加 k 杂。 

Frank ： 乍少我的代码能£常工作。耶个 CSV 方案 则完令 是废 

物。 


Jim ： 可是它原来工作得很好!至少…， 
随商品的不同而改变之前它丧观很好 # 


嗯，至少 fr : 数据的结构会 


Joe ： 也就是说 , Jim 的 CSV 不能用，而 Frank 的 XML 太复杂。看看 


你们的选择!好在还有另外-种做法。 
Jim ： 是什么?你找到 f 什么？ 

Frank ： 最好別是前面慘败的 innerHTML . 

Joe ： 我发现 TJSON! 

Jim 和 Frank : JSON ? 这到底是什么? 


Joe ： JSON 是 JavaScript^ 准对象 i 己法 （JavaScript Standard Object Notation) 。 ii [是一种以 
纯文本犮示 JavaScript 对象的方法。所以服务器 "J • 以向我们发送 JSON— 这 H 是纯文本，不 
沿要处押 .XM L 或 DOM 之类的问题 —— 而我们的 JavaScript 可以把这个响应处理为对象。 

Jim ： 这乂有什么 ? 

Frank : 嗯， 如果 Joe 确实找到了好东西 —— 

Joe ： 当然了！ 

Frank ： —— 那么，你将不 耑要所 有这些 DOM, 共至 + 需要 split () 和其他 文本管 理代妈 。 你 
U: 使用一些简单的代码，比如 var description = itemDetails.description 0 这确实很酷。 

Joe ： 済看它是这样工作的 …… 
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JSON 


JSON 玎认 I 文本！对象 


利 WCSV (逗号分榀 。 CSV 数据坫纯义本。服务器发送文 
本， 而 JavaScript 必须使用字符串处理例程(如 split ⑴ 把这 
个字符串转换为各部分数据。 


[csy\ 


itemDetails = response• split (••, ••> 



Web 服务器 


利川 XML 。 服务器也发送文本，不过这个文本是 ft 描述的。所 
以我们可以使用 i tV 求对象的 r e s p on s e X M L M 性得到这个文本的 
一个 DOM 灰示。 不过， 接卜来必须使用那鸣 DOM " 法处理这个 
对象， rfif 不能使屮 description 或 urls 之类具体的属性名。 



responseDoc = request.responseXML; 




Web 服务器 


但是，假设我们有一种办法从服务器得到文本，然后把这个文 
本处理为 JavaScript 对象。不必使用字符串处理或 DOM 方法， 
只需使…类似 item.description 或 itemDetails.urls 的代 
码。换句话说，这样一来我们就得到一种格式，可以表示为文 
本以便络传输，而在耑要处理数倨时丧示为 个 对象。 


\Jso^ 


description 


item.description; 





Web 服务器 


i^iharpen your penci 1 

is 设有一个 I 


个商品的 ID 、 描述、价格和该商品有关 URL 的-个 
列表。你认为表示这个信息的对象 " r 能是什么样？在下面为 
这个对象_ •个岡，然后增加你认为这个对染吋能有的所有 
字段。 
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^harpen your pencil 
Solution 


钱们认的这个的，， ^ 
名 jfjitemOetailiA ^ 

的 i 言：它不表 5 ••一工 
商*的 ( tfi 。 


假设有一个商品的 ID、 描述、价格和该商品有关 URL 的-个列表。你的 
任务足_出表示该信息的对象。 


rfwctifrtion 和 piicelplii 个对象的羼作 

n 3 


w -个料，&仞紡料 
辈个 URL。 



JS0N 数梅可认处理为 JavaScript 
对象 

iT ~ 

从服务器或某个其他来源获取 JSON 数据时，就足在获取文 

本 不过这个文本可以很容易地转换为一个 JavaScript 对象。 

之后，你要做的就是使用点 id 法访 H 这个对象的字段。点记法 
是指先是对象名，后曲是一个点号，然后是一个字段名，如卜' : 




var weakness = superman.weakness; 

例如，假设有以上答案中所示的一个对象，你认为该如何访 r«j 
description 卞段的值？ 


如果你已经在右你的答案， rfiiil 认为这太简单了，那你可能就 
做对了。处理 JavaScript 对象就是这么简单。 
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那么如何从服务器的响应得到 
JS 0 N 数椐？ 

服务器将响应作为 JSON 数据发送时，数据会作为文本通过网络 
传递，所以可以使用清求对象的 responseText 城性来得到这 
个数据。 


var jsonData = request.responseText; 


下面来肴服务器到底响应 r 什么……然后可以得出如 
何将这个响应 的换为我们能 处理的对象。 

I 、•我第10章的示例，其中包括一个 JSON 版本的服务器端 
脚本，以及这个脚本使用的一个 JSON 库。 


修改 getDetailsO (位干 thumbnails . js ) 中的请求 URL ， 指 
向这个 JSON 脚本 getDctailsJSON . php 。 请求的其他方面仍 
保待不变。 

得到服务器的文本响应，使用一个 alertOiS 句或其他 
JavaScript 输出函数吐示这个文本。会有怎样的响应？ 
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服务器会响应什么？看上去像足个 JavaScript 对象吗？ 


vtlOH 

□ 


下栽第10茕的示例，其中包括-个 JSON 版本的服务器端 
脚本，以及这个脚本使用的一个 JSON 庳。 


修改 getDetails () (位亍 thumbnails . js ) 中的请求 URL ， 指 
向这个 JSON 脚本 getDetailsJSON . php 。 请求的 K •他力•而仍 
保持不变。 


这4 $ et 0 et < u £ K ) 中的 •"矜 代砝 • 
它 AUS0N 哚务器叇來本茂求一 
个畴在。 ^ 

var url= ,f getDetailsJSON.php?ImageID= M + escape (itemName); 


得到服务器的文本响应，使用一个 alert () 语句或其他 
JavaScript 输出函数显示这个文本。会有怎样的响应？ 


alert(request.responseText) ; 





t 扣如戤奋奂 0 录 页香巧曼壬一 
吉他® (象 的 含得趵 ii 个嘀在 = \ 

The page at http://www.headfirstlabs.com says: 

nd": - itemCuitar" f "description" "Pete Townshend once played this guitar while his own axe was m the shop 
having bits of drumkit removed from 

it.*,"price" 5695 99 ， "urls •: 「 http:\/\/www thewho.comWhupA/'/en.wikipedia.orgX/wiki'/Pete-TownshencT]} 


OK 


洚到底長什么？鶬对它够什么？ 
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JavaScript 可认 计箕 文本数椐 


JavaScript 非常梢 K 十把文本转换为对象、函数和 I 午多 K - 他形 
式。可以向 JavaScript 提供一些文本，它非常聪明，能够得出这 
个文本表示什么。 


例如，还记得如 M 指定事件处理程序吗? 

image.onclick = function () { 



个 

^^t^onchch$^ 


var detailURL = •images" + this.title + *-detail.jpg'; 
document.getElementById( ,, itemDetail M ) .src = detailURL; 


getDetails(this.title); 


) 

JavaScript 得到这个文本函数，并在内存中创建一个真正的函数。 
所以点占一个图像时，就会执行内存中的这个函数代码。小过, 
这些都在后台进行，所以无须你操心。 


不过，如果你有一些文本， 黹 要告诉 JavaScript 把它转换为非文本 
的艽他 形式，该怎么做呢？ 

{• ， id":"itemGuitar", 

"description" : "Pete Townshend once played this guitar 
’•price" : 5695.99, 

••urls": [ "http: //www. thewho.com /”， 

"http://en.wikipedia.org/wiki/Pete_Townshend”]} 



，呢务器的这个碭在罨 m 
通鑤作名扣 $ …… fSl 怎样 
%诉 hvaSctipt 抵它 H 族6 我们 
你值用的的象 


使用 evald 手动 i 十 S 丈本 


eval ㈠ 闲数吿诉 JavaScript^ 体 U •算文本。所以，如果将描述一 
个 i § 句的文本仿递给 eval () ， JavaScript 会具体运行这个语句， 


并给出结果。 


alert(eval( M 2 + 2 M )) ； 


JflvflSciipttH X 本 

- 2 + 2 _ . 


.4 



…… 為把它 H 6 

lie) 2 + 2 …… 


… 然后 # 髯 (i 个表 & 式 . 
叇 I 。 
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eval () 计算 JSON 数据 

计箕 JSON 数椐会返®淡数椐的一 
个4象表示 

那么这个方法如何应用于 JSON 数椐呢？在描述一组属性名和值 
的文本上运行 eval () 时， JavaScript 会返回这些诚性和值的•个 
对象表示。假设对以下文本运行 eval(h 



id” ： "itemGuitar", 

'description” ： "Pete Townshend once played this guitar 

'price” : 5695. 99, ^ ' -- 

r urls": ["http://www.thewho.com/", 

"http : //en.wikipedia.org/wiki/Pete_Townshend M )} 


http://en.wikipedia.org/wiki/Pete—Townshend 



“u s 數 ffl 鞾搞为一个數祖尿伐 
苒中 £ 含备个垃迅无棄 4 • 


不过冇一个问越 


fj ■起来 JavaScript 由 J SON 响应创让的对象作常适用十 Rob 的摇滚商品目录 
页面。不过有一点要注怠，需要确保整个 JSON 响应串被视为一个对象。 
所以,在调用 eval() 时，要用括号把整个响应包围起来，如I、*所示: 


1 eval( | | ，（， f^\JSON data string | + J7), j 

v Sw 把螫个 太本 ㈣ 起來这 


逢后这个舄咢锘来 《 4 《) 弟句 


用私咢龙，蝥个 X 本 fe ® 起來 • 4 
杖在苦 # JavaScnpt : " ft t； i£ 
昼作# 一个系® 
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JSON 


tliere，are nQ 

Dumb QuestiQHS 


1^) :我熏要一些特殊的库来读取 I ®): 
JSON 数据吗？ 本？ 


这么说 eval (> 会运行一段文|^): 文本中的每组名/值都会成为 

对象的一个属性和该属性的一个值吗？ 


:不用。 eva 1 () 是 JavaScript 
的内 S 方法，只需这个方法就可以把 
JSON 数据转換为 JavaScript 对象。 

1^) : 为什么要使用 evalO ? 难道不 

能直接从服务器解析原始文本吗？ 

^ : 当然可以，不过为什么要那 

么取頌？ eval () 会把所有文本转换为 
一 个非常阕单的对象，这蛘你就可以避 
兔计算字符 个軚以 及使用 s p 1 i t () 等问 

: eval () 就代表计算，对吗？ 

I 没错， eval 0会计算一个字 
符串， 


^ : 嗯.并不总是如此。 eval () 

取一个字符串，把它转换为一个表达 
式，然后返回这个表达式的结果。所 
以.对于一个类似 “2 + 2” 的字符串， 
表达式就是2 + 2,这个表达式的结果 
是4，因此由 eval ("2 + 2">;会返田 4. 

不过，对于一个类似 ‘{ “ id ” ：” item 
Guitar ” ，” price ” :5695.99" 的串, 
把它转换为一个表达式并执行这个表达 
式会得到一个新对象，而不是一个具体 
的“答案”。所以有时 eval (> 并不真正 
运行文本而只是计算（或 解绎） 文本。 

1^) : 服务器响应中包围所有内容 

的大括号是 什么？ 

^ : JSON ft 据都用大括号 （{ 
和}) am . 这类似于用 | 和 | 包围 fu 且。 
这只是在告诉 JavaScript : “味，我要 
描述一个对象了。” 


^ : 没错。对象描述中的 

文本 “ id ” ： “ itemGuitar ” 告诉 
JavaScript 有一个 id 成性，而且该属性 
的值应当是 “ itemGuUar ” 。 

: 那么 urls 属性呢？看起来有 

点奇怪。 

^ : urls 是一个軚组。 所以硃 性名 
是 “ urls ” ，它的值是一个 ft 组，由开 
始和结東中括号 （ [和】 >4&示。 



你已经釭丫返 IHJSON 数据的_木，现作也知道 r 如 H 将这个响佐转换为•个对 
象,余下的就是在回调函数中使用这个对象。打开 thumbnails . js ， 看看能不能重写 
displayDetails ( >将服务器返 I "]的 JSON 数你;的换为一个对象，然后使 Mj 这个对象来更新 
Rob 的商品目录页面。 
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你 ti 经有了返回 JSON 数据的 _ 本，现在也知道了如何将这个响砬转换为-个对象。你 
的任务是在回调函数屮使 W 这个对象。你会怎样做？ 


function displayDetails() { 

if (request.readyState == 4) { 
if (request.status == 200) { 

var detailDiv = document.getElementByld("description"); 

var iteinDetails = aval (' ( 1 + r«qu_st.r 籲 spons 籲 T 籲 xt + ')') 


f 求 JavaSciipt^e 


个的象。 

/ 


II Remove existing item details (if any) 
var children = detailDiv.childNodes; 




for (var i=children.length; i>0; i ― ) { 
detailDiv.removeChild(children[i 一 1]); 



5 弟否 $ 本卑表•子 
的产 、多數 f 七;？务第 
9肇中的 XML 舨本 
炎一样的。 



} 

// Add new item details 

var description? = document.createElement ( M p ,f ); 
description?.appendChild( 


利用 JSON ， 沒右必 龙,|用 dom 
从屎夯 8 得时值. 


nZ 


itainD#tails.description)); 


document.createTextNode ("Description : •’ 
detailDiv.appendChild(description?); 
var priceP = document.createElement<"p ”）； 
priceP.appendChild( 

document.createTextNode( w Price: $" + iteinDetails.price)); 
detailDiv.appendChild(priceP); 
var list = document • createElement ("ul ”）； dsr 
for (var i=0; i<itamDetaila.urls.length; i++) 
var url = itemDetails.urls[i]; 
var li = document.createElement( H li M ); 


5 



琨 4 得趵备个奋兵的有关锡 


var a = document.createElement( M a M ); 
a.setAttribute("href", url); 


a.appendChild(document.createTextNode(url)); 


li.appendChild(a); 
list.appendChild(li); 

} 

detailDiv.appendChild(list); 
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therefore no 

Dumb Questions 


R : 这只是一种数据格式.对吗？ 

^ : 没错.要在 Web 页面和服务器之间犮送信息，就 

会需要一钟方法来完成这个信息的格式化。到目前为止， 
我们已经使用了纯文本犮送请求，并使用文本和 XML 获取 
响应。 JSON 只是另一种来回发送数据的方法。 

: 如果已经选择了 XML 和文本，还需要 JSON 吗？ 

S 因 々 JSON 就是 JavaScript ,所以对于 JavaScript 
41序3和洌見器来说处理 JSON 会容易得多。另卟，由于 
JSON 会创建一个标准 JavaScript 对象，它看上去史像是一 
个结合了数据和功能的“业务对象”，而不是一个无类《 
的 XML DOM 树，尽管由 XML 响应也可以创建类似的对象， 
忸是 这需要做大量頦卟的工作，还需要一些模式和軚据绑 
定工具。 


: 这么说， JSON 能做到 XML 不能做的事情，是吗？ 

^ : 并不是说它做得更多，实际上 JSON 能做的事情不 
如 XML 多.不过，只要 JSON 能做，它都会做得 SJ 单漂亮， 
不需要大量 开销； 而 XML 有所不同，作为一个特性更完备 
的标记语言， XML 设计为需要处理大 f 讳卟工作，因此会 
导致很大的开销。 

: 能再谈谈语法吗？我还是不太明白商品的文本表 

示。 能不能再解释一下这是什么意思？ 

^ : 大括号{和}定义了一个对象,这是名/值对的一个 

无序集合，中括号 | 和1指示了一个有序集合。在你的代码 
中.要根据名来引网大括号里的七素，而中括号里的元索 
則按軚字引用。下面未详细分析. 


我们 在釗瀘_个名 ^UemOetaUs 



闷（屎名铊屢扣1的象 名）。 
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运行测试 


行测试 


但是 JSON 真的能让 Rob 动心吗 ? 


代码看上去确实简单一些， Iffia 还可以少处现-个 DOM。m 是 JSON 版本的 Robifif 
品 M 录页向确实能正常 T 作吗？按照388页的代码修改你的冋调函数，史新请求 
URL 为 getDetailsJSON.php ，并尝成这个新版本的商品目录 [J] [面。 





Ravy 




kit rte : ^ §*• •v t 

*%/• ■**' »ir* j 


， 》3 



确保除了 JSON 服务 
器端脚本外还要 
有 JSON.php 。 

这一章的服务器端 


脚本要求用到 JSON.php , 这个文 
件包含在这一章的下栽代码中。 


在继续下面的工作之前一定要准 


备好所有这些文件。 


ii 一旁中的風务器速脚本《 
用 fOJSON 它让理5 一费 
PHP 鞾宅问拯.值贩务器上钍 
U2S0Ni^i$*» 


U ...... 7 .t •_ „ 〜吸，彤吒 


390 第 10 章 


Download at http://www.pin5i.com/ 











JSON 


O 


0 




Frank ： 你说得对!他的 JSON 代码在这方面确实没 有太大 帮助。 
他的代叭的前提足要知道对象厲性名。 




Jim ： 他绝对没希空，老兄。你总足从 c 尜的标 Ui 名该取 K 性 
名，而他的代码却 把厲性 名作为代码的一部分……甚至不是 
getElementsByTagName() 之类搜索方法的参数。 


Frank ： 你说得没错。我打赌这下他<没辙了 
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JavaScript 是解释的 


JavaScript 对象 8 经 是动 0 的 . ©为它 

们不是编译对象/ —— 谓相 C ++ 代铒。 

— 

仵编译 IS 言中，会在一个源 文什屮 定义对象，如 . java 或 . cpp 文件，然后将这 
呰文件编译为字节码。所以， 一 H . 程序开始运行，就必须遵循已经编译为卞节 
码的对象定义。换句话说，如! ft 不进行承编译，一个 Car 对象不会突然有一个新 
的 manufacturer 诚性。这样一来，就能使扭一个使) Hear 对象的人洁楚地知道 
对象会是怎样的。 


不过, JavaScript 不是编译的，这是-种解释型语言 # 任何时刻情况都可以有所 
改变。不仅如此，服务器发送的对象还可以在运行时创建(通过使用 eval (0 。 
所以，不论 l 〖》 jJavaScript 发送什么，部以通过 itemDetails 对象得到。 


evaf () 不乘 f 延笏知迮达釗澧的 | 何种类螌 
的的象.它只袅辨真你砝佴的亡本。 



达个政冬的 “— U 奄 * 个扣 


iil 我们0铊_ 迻用的的象 
用 M 耷 眘兵栌 I 本畢作 


IS I 叼琴 f -个灰的 co 〖 < n , 深 
1和_个乐的 \io7n 翼 
4 ( 萁幸岂 含一个 2裝 ifj ) 


_ u 

urla 

■FI 

—— 




id_k_ ~¥ 

^ url\ i 


descriptio^^ *1| 


我扪粗本; T •霈要修欤对象/只霈要沪续妒何确 
定对焦丈有什么^ 
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玎认汸问一个对象的成员……然后利用迖些 
成员得到对象的值 


只需要使川 for/in 语法， JavaScript 会吿诉你一个对象打哪呰属性。假设有一个名为 
itemDetails 的对象，你想知道 itemDetails 有什么域性，可以使用以 F 代码来 
得到这苎 M 性。 

for (var property in hero) { 

alert ("Found a property named: •’ + property); 

} 

非常简电，对不对？变量 property 会有 id 、 description 、 price 和 urls 
等值。 


小过，我们小只足想得到域性名，还希望得到各个诚性的值。这也没问 
题，因为 JavaScript 允 i 午访问 对象的域性， 就好像 对象是-个数组-样。不 
过，不用提供数组索引,如 itemDetails [0】, 你吋以提供一个属性名，如 
itemDetails [" price "】。 


换句 W •说，对千一个对象， itemDetails [" price "】 返 M 的值就足:该对象 

中名为 price 的诚性的值。 #硤砝行达 ^ctemOetails 



description 


itemDetails["id "】 

itemDetails["description " 】 
itemDetails["price" 


圬象中相在诔作的 


temDetails["urls"j [0] 


itemDetails[ w urls n ] [1] 

itemDetails["urls"][2 】 
itemDetails["urls 


itemDetads[ .“its" 1 的 — 个 

feiE …… 

9 以沒过裊字 索引来 







你应该知逍下面该做什么。更新你的商品目录页面，处理服务器返回的动态数据。你 
并不知逬会得到什么……所知道的只足服务器会以 JSON 格式返回一个对象，其中包含 
陡件坆那些 Kn 的 f/U 祝你好运！ 
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是个数组吗？ 




JavaScript 没有提供一种内置方法来确定是一个值 
是否是数组 


处理动态数据足个練 f •的题。例如，在代叭中写 
itemDetails .urls 时，你知道这个属性的值会 
是 •个 数纴 I 。 fU./S ： itemDetails [propertyName] 
呢？这个域性的值是一个数组还是一个单 fft (比如 
说一个字符串）呢？ 

遗憾的是， JavaScript 没有提供-种莳箏的方法来査 
看一个值是否是数组。你可以使用 typeof 操作符， 
不过即使是数组， typeof 也会返回 “object” 而不 
是你所期望的 “array ” 。 

为广对你冇所侬助，以下是•段成品代 Pi , 可以 
告 ui ： •你一个足否 坫数 m 。 把这个函数增加到 


如粟鳟入一个.數 
组’ £. * sA ” a ,() 
© ttue , io 
霉鳟入其姑 $ . 
如一个字搿赛 . 
杖含送 liaise 


thumbnai 1 s.j s 的最后，然后 T5 •.行你能不能完成上 
一页的练习。 J 


function isArray(arg) 


if (typeof arg == * object 1 ) 


It 进郝 i^jAMAScript 认泠 4 的象 



成 品代码 


var criteria = arg.constructor.toString().match(/array/i) 

„ , 、 . ， 114 k M 眘辁进部耷一个笆含辈 一 5 

return (criteria ! = null) ; •• 

{!] attay 的 coiKttiu:t<n 0 


V 


ret _ 口二 r— 

不基 一 个數 iE 。 


圣后的“ r 
表孑不 s 分之 


把整个 ii 个&敦缯加 f ‘) 
thumbnails. js 的备 ,€ » 
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你应该知道 F 而该做什么。史新你的商品0录页面，处理服务器返 N 的动态数据。你 
并不知追会得到什么…… 所知道 的只是服务器会以 JSON 格式返回一个对象， K •中包含 
诚性及那些诚性 的值。 你是怎么做的？ 


function displayDetails() { 

if (request•readyState == 4) { 
if (request.status == 200) { 

var detailDiv = document .getElementByld( ,, description M ); 


var itemDetails = eval(•(• ♦ request.responseText 
// Remove existing item details (if any) 
var children = detailDiv.childNodes; 
for (var i=children.length; i>0; i —— ){ 
detailDiv.removeChiId(children(i-1]); 

} 


); 



泛-郝分沒苟 《 何电变 .. 
iif . 0 •在:.看钕现奇的内容 


记 (if 在代趄中 
則达个 JavoSctipt 

^ t I 

do 


II Add new item details 
for (var property in itemDetails) { 

var propertyValue = itemDetails[property]; 

if (!isArray(propertyValue)) { ^ - 

var p = document.createElement( M p M ); 
p.appendChild( 


' 的象栌备个暴作* 


芒 光洱到 尿饯的栓砉 
( i 个$4否4數访 L 


的子多$尿伐 .必场 
达代41理隳伐$ 數通。 


document.createTextNode(property ^ ":" + propertyValue)) 
detailDiv.appendChild(p); 
else { 

var p = document.createElement r'p"); 

p• appendChild (document • createTextNode (property + •’：">> 
var list = document.createElement( w ul M ); 
for (var i=0; i<propertyValue,length; i++) { 
var li = document.createElement("li">; 

li.appendChild(document.createTextNode(propertyValue[i])); 
list.appendChild(li); ^ 一- 对子袅 闼中的 主小戊 

detailDiv•appendChild(p); 
detailDiv.appendChild(list); 


輩 屎作很 容异公 
扣一费 i 本。 


坩加任 
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确实是数组! 


-行测试- 

JSON 测试总动员。 

现在我们的代 叽能处理动态 对象，值 " r 以是字符串或足数 m ， 运行得相当完笑。 
下而来看这个改进后的新 JSON 页面…… 



一仂正業 


c f 译 R06 金破 



贫办… _ 

你认为 isArrayO 应该在 thumbnails . js 中还是 utils . js 中? 
把这个函数放在适1的地方，再对其余代码做必要的 
修改。 
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好的属性名并不总是好的标签名。 

仔细奔看一个商品描述的诚性名。 冰， 



达签 f I ；去》 
不太衿 、 


J : enHa*. 


descf pvor^^ael jacKsor s ha: »$ worn r : he Bile 
.'ear, v deo Not retlly rock nenorab l a. bu： it snails 
better : f ar Slash s topha： 


020 


• r：:p 内作 a n'craeliJcKsor .con 

• M：p njs c yahoo con v d 2M303D B ile ear 



我 fn 部是先输出域性名，然后足 这个诚 性的沆。不过，这苎 
诚性名看起来更像是代叭而不是“人类语言”。 

不仅如此，每个商品的 ID 也会显示出来，这很能会成为一 
个严®的安全隐患。 

你会怎么解决这些 M 题？ 
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当心 eval() 


还不只是达整 问飈。 达样使用 eval () 抖不安金- 
你崖现 了码？ 你在 i 十蕙采 tX 他采遇的文芩！ 


0 


0 


Joe: 哦，对，是有这个问题。 

Frank： 你 A 的认为这种想法好吗？ ft 接运行別人给你的代码？ 

Joe： 我没有运行它，我只足在汁算。准道你前面没注意听吗？ 

Jim： 有些人很不开心,他们发现 ISON 力案并不很容易…… 

Frank： 不管 JSON 足否游蛣，你都不能0丨！地直抟计算这个 
代码。如果这是恶意代码呢？比如说攻占屮户浏览器或其他 
资源的一个脚本？或者是如緊这个代矾把用户浏览器艰定向到 
一个色情网站呢？ 

Joe： 你开玩笑吧?要知道,这是 Rob 的服务器! 

Frank： 如果不是正确的 JSON 呢?如果有错误呢?如果代码 
中有错误, il- 算这样的代码会不会对用户生成错误? 



Jim： 听上去确实成 N 题， Joe 


Joe： m H 两只足不乐意我得到那把占他。 

Frank :喂， 安令为上，朋友。我古诉你，不能对你无法控制的代 
妈随怠使 Hleval()。 


会计算你 
提伊的任何代 


Joe： 说得对。那我现在该怎么做? 





Ajax 请求对象只能对同一个服务器 t 的程序 
逮立请求(即创建请求的 JavaScript 所在的月 K 
务器），这一点对 T •在服务器响应文本上使 
用 eval() 所带來的危险有影响吗?会减少.增 
加还是会改变这种 fe 险？ 


瑪， 隽：•考虚 
计箕佘¥移什么 
錄弟. 

必谈熊矽直莰控 
御计算的 
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f 要解析服 务器的响应，而不只是 

Aka % 


调用 eval 《> 会启动-个简中.的过 程： 取一段文本，然后计算这个文 
本。我们还志要 W 外的- •步： 假设可以取得-段文本，汴确保它确 
实足 JSON 格犬的 数倨。在此之后，就 " f 以合押.地认为能够；仝地 h - 
算这个数据，并把它转换为-个 JavaScript 对象。 


这个额外的步骤——即解析数据汴确保足 JSON 数倨——可以铋我们 

避免如卜‘两个 ® 要的潜题 L U^Scnvt 

^ — -- 藏鞏的 

o 找们知道这个数倨可以安令地进行计兑，而不是一个恶 意脚 
本成程序。 


代砝我其 M 冬 先法連 过一个 
4 JSON & 4 I " 贱。 


© 吋以确保数 fr： 外仅足 JSON 数椐， iftiR 迠适“1格火化的 JS§i^ 柝器；^•搞获心. 
不会导致用户逍遇任何错误。 只！祛44^31 —个 


对 Joe (和我们)来说很幸运的是， JSON 网站 ( http :// www . json . org ) 
提供 r 一个 json 解析器，可以完成所有这些任务（找至还"〖以完成 
更多其他 II 作 ） f " f 以从 json.org F 裁-个名为 json 2. js 的脚本，然后 
使川以下命令来解祈 J S O N 格式的数椐。 


var itemDetai ^ 4l ^ iX ^^ IJ ^ equ eS t . reSp0nSe T eX t 


X ! 

仍 t s 埒锔用 
咖㈣ i 一个 •" 


本:欠由 We 6 到' € 器加獻 
f sc«2. js 的食舍 ) 連这个 
JSON 的象， 


\ 

个字兩苺. 如 粟迗个 
字爷蓽基含 -i^JSON 络式數沒 . 

(Dil ；6 rr> 一 人 j 负 


\ , 

芍 k/ • 龙％务器栌嘥在色社峙 x 

JSON paiseOo 



修改代码来使用 JSON . parse ()。 

第10章的不例代朽已经在 scripts / 屮包含 fjson 2. js 。 在 
inventory.htm 1中增加这个新 W 本的—个 引⑴，汁更 新你的 
七 11111111311 己 ：115 45 来使用 3501^. 口 31 ： 56() 冶】小处 € 乂 31 (>。 


龙 j S 0 ” 2 . , S 的# 用旋在 
tham6nac(^ . 用贫泰 .© 
i^thun\bnails^f 5 f'J 

_ n 2 脚本。 
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更多挑战! 


还布很多工作要做，你能帮助 Joe 蘚决吗? 


用户点击商品时如何避免显示这个商品的 ID ? 

那些标签呢？你能想出一种办法来显示更好.更可读的标签吗？ 

那些 URL 呢？你能想出一种办法将 URL 格式化为链接（使用 < a > 元 素）， 
使得这些元素可点击吗？ 

除了以上问题. 你认 为 Rob 的商品目录页面还可以怎样改进？ 

不要忘记使用 JSON 解析器，而不要直接使用 evalO ! 


你熊谀芹 JSONitRob 的商品 P 彔页 WK 聆鸣？构洚侪的最 
後的 在 Head First Labs^Head First Jijaxxt 

坛中扶矣你的在％盾儿个方中我扪佘对彔现最出色 


技间这 f . 命 a 们蜃•子•伐的忾兵.坫 饵一个 uRLk / •嘈 
哉 fit 考伪杓威霉（以双你 n 样货 的）。 


« no 


Head First Labs from O'Reilly M;*dia, Inc. 






个 


O REILLY 


hnp //headfirstiabs.com/ 


Brain-Friendly Guides froc^^Reilly Media , 




Q, 



Head First Labs 


㈤ 义‘辜 >’. ‘公麵録％ 

lKq 4 




Head First Ajax Sneak PrJ 

Get an introduction to Ajax with an exce| 
Ajax % which you'll find on this page. 


c News, Info, < 
i and Surveys 


I Dltcunlon 


June Newsletter 

We sent out our June Newsletter recer 
newsletters via email. 



ch Head First Labs 
0_Reilly.com 


h Tips 











JSON 


1^) : 那么 XML 与 JSON 相比怎么 

样呢？哪一个更好？另外，到底谁贏 
得了那把吉他？ 

^ : 这也是一个好 问題. 你现在 
已经看到很多 JSON 和 XML 代码了 .•… 
你更喜欢哪一个？ 


完成 Web 编 程时， 
安全总是一个重 
要问题。 


I ®): 难道永远都不能用 eval () 吗？ 

: eva 1 (> 是 JavaScript 中的一 

个重要部分。如果需要将文本数据 
传入另一个 Aft 完成计算，或者在脚 
衣之间传遂， eval (> 确实非常有用。 
不过，如果计算你不能有所控制的軚 
据， eval <> 可能会有问题，例如倘若 
ft 据来自其他人的程序或服务器，在 
这些情况下，你并不能提前准确地 
如道你要计算什么.所以如果你无法 
控制所有軚据，就要使用一个解析器 
或者另卟某忡方法，而不是直接使用 
eval (). 

f 1 ®) : JSON 解析器就能保证我的 

代码安全，是吗？ 

^ : JSON 解忻器可以保证你的 

代码比直接使用 eval () 时更安全 ，扭 
是这并不意味着你能完全放心.编 
写 Web 代码时，安全往往都是一个重 
要的问題.对于 JSON 数据. JSON. 
pa rse <) 可以确保你焊到合法的 JSON 
啟据，但是你仍然不知道这个軚据到 
民是什么„所以，在脚本的其他位 Jt 
使闹这个 軚据之 前可能还需要做其他 
检查。 


therejcire np 

Durnb Questions 

: 对于 Rob 的这个页面.我们 
没有做任何这种检查，应该做那些检 
查吗？ 

^: 这个问題问得好。改进这个 

应用来帮助 j oe 解决问题时.请考忠你 
会浔 到什么 軚据，这痊敫据会被恶意 
使用吗？你认为需要其他安全检查吗？ 

: 那么 json 2 .js 脚本呢？我能 

相信和依赖这个代码吗？ 

^ : 现在你考志问題的思路已经 
像是个 Web « 序员了！只要使用其他 
来源的代码.比如说来自 http :// www . 
json . org , 就应该全面地检查那个 
代码 u 我们已经在 Head Rrst Labs 完 
成了这个測试，所以可以安全地使用 
json 2. js * 

: 它也是免费的，对不对？使 

用 json 2. js 要付钱吗? 

: json 2 .js 是兔费的，这是 

一个开源脚本 a 可以在 http :// www . 
json . org / json 2 .js 读到源代码， 你 
可以自己查看它会做痊 什么。 


控定测 
全一的 
完 ， ® 
法码全 
无代行 
子的逬 o 
对制要试 
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抉择之际 


那么哪一种数椐梏式 E 好喂? 



( ms 然嘧…… JSON 最 通用. 而 Q 戗 
到？ JavaScript 在好， 利 fflJSON , 从 ffi 务器 
得到数掩对我不 t 要戗任何枝异的卯 M 导航。 


Frank ： 俱我实在看不出你使用 JSON 到底有什么奸处, 
也 I 午对你来说使用会梢微容易-些，不过处理动态数 
据时确实很麻烦。 


Joe ： 我还是认为 JSON 可以 It 我按 JavaScript 而不是其 


姦 CSV 


他某种语言来考虑 H 趙。 
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JSON 


terpen your pencil 


你怎么想？下面有两列：一列对应 XML ， 另一列对应 JSON 。 
请在各个铋题下写出你为什么认为这种格式更好。看看你能 
不能对 XML 给出至少5个依据，另 外再为 JSON 给出5个原因。 


厶 


J50JV 
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XML 与 JSON 


Fireside Chats 


今晚 I ?； •题： XML 和 JSON 关于数据格式和标准化的交锋 


XML: 

(怒视和 SON ) 


我以前就听说过这个传言……不过看看我现在不 
足好好的吗？我还是 当今世 界不折不扣的主导数 
tt » i 格式。 


我庞大足因为我能处理所有 一切： 纪念 
品、 HTML 、 订单 ……你交给我什么我都能处理。 
完全没有 H 题。你觉得像你这样的小不点能处理 
所冇这苎不 M 类喂的数据吗？我可不这么认为。 


我 d 经够快 r , 特別足如果你使用我的属性，而 
n 我是多面手……我可以处理各种 r 作，比如表 
示一个数学公式或一本书。 


m 是别人能把你转换成其他形式吗？比如说 
XSLT ? 或者迠 Web 服务……你应该能处 fffiWeb 服 
务吧？ 


JSON: 


你的未口终子来 f , XML 。 今天晚上，全世界都 
会呑到你的失畋，特别是对于 JavaScript 和异步应 
用。 


你在这个位 S h 只是因为人们觉得没 有其他 "了选 
的格式。我知道很多人都受不广你， XML …- 
你太庞大，太臃肿，处理起来太麻烦。 


也许不行，佴我的速度快……比你快多 f ， 大多 
数情况下都是这样。 


喂，我的大多数用户对干在 W 络上发送数学公式 
并不感兴趣。另外，那些尖括号呢？ 对了 ••… 
任何人只要 T 解数组都可以使用 JSON , 而不必 
先学所有那些奇怪的 XML 语法。 
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JSON 


XML: 


哦， i * (足这样吗？如今已经有很多 DOM 专家，可 
以编写超一流的用户界向'。你见过 Fifteen Puzzle 
吧？那个佐用就很酷，而且才只有100行代码而 
Li 。 当今世界，只要懂 DOM 的人都跃跃欲试要用 
XML ! 


所有那呰服务器会怎么考虑这个问题？你知道 
的， PHP 和 ASP . Net 还有 Java ……我看不出他 f|‘J 
准备支持你和你的“轻 M 级数椐格式”言论。 


库？如裝他们必须使用一个库，为什么不使用 
—个 U 隹呢，比如说文本对象模型 （Document 
Object Model ) ? 


但足现仵已经有我了，人家都在用我，闪为我已 
经是一个标准。 W 根结底，你也只是另一种专用 
数椐格 A 。 也许 JSON 迷会比逗号分隔植迷梢多- 
些，但是我才足终 结者。 


JSON: 

喂，你有些使用过度了，+是吗……你没抓住重 
点，“尖括号”。我根本不关心那些。我关心 
的只是在 Web 页面与服务器之间获得信息，而根 
本没有额外的丁.作……比如说必须在 DOMW h 
“爬上爬下”。你认 m 的人中谁会觉得这样好玩？ 


要知道，所有开发人员具正需要的是一种轻最级 
的数据格式，要很容易用 JavaScript 处理。老兄， 
他们要的就是我，是你。 


嗯，我想这倒是 A 的……不过已经有很多库可供 
他们用来处理 JSON 。 


在 PHP 5中我已经成为标准了，而且谁知逬卩一 
步还有准将会采纳我？ 


真的吗？那 ih . 我们拭目以待 
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练习 . 答案？ 


窄 parpen your pencil 
、- Solution 


Kiva. 


你怎么想 •/ 下面有 两列: 一列对应 XML ， 另-列对应 JSON 。 
请在 各个蚣题 F 写出你为什么认为这种格忒 电好。 肴看你能 
不能对 XML 给出至少5个依据，另外再为 JSON 给出5个原因。 


JSOJV 





406 第10章 








11 表簞 乌验证 


—i 



每个人都会经常犯错误。 

如果 lh - 个人说儿分钟(或荇打儿分钟 字）， 很可能他至少会犯一 
两个错误。你的 Web 应用会对这些错误做何响应?应当验证用户输入， 
如果输人有问题就必须作出反应。但是具体该由谁来响应，»外该做 
些什么?你的 Web 页面做什么?你的 JavaScript 又该做什么?服务器在 
验 ilH 和数据完整性方面起什么作用?翻开下•页， « r 以看到所 有这鵠 
问题(以及史多其他 问题) 的答案…… 


这是新的一章 407 






Marcy 的成功 


Marcy 的 Yoga for Programmers . 

一个蓬勃兴起的新企让 

依 fiMarcy 的热|’ j 新 N 站和超快的响应速度，她的 Yoga for Programmers 取得了 
匕速发展。每人 : 都有一些砟谷的商端客户注册她的网站。她并至还增 加了在 线 
饫 i 己功能，这怍 - K 潜在容户找到 r 合适的班级就"了以立即注册。 



a f 珀以拎入 亡$ 
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表单与验证 


c^^rpen your pencil 


以卜'是\^«^不断增 K ： 的客户数据 M : 中的一些 U 1 诂。这41存 
在一咚严$:的 M 题……你能找出这些 M 题吗？ 


firstname 


Susan 


Bob 


Susan 


F0b#2938 


Jones 


Gerry 


lastname 


Smith 


Brown 


Smith 


MacGregor 


Bainfield 


email 


bday 


ss@myjob.com 1 January 


August 300 


ss@myjob.com 1 January 


WWW 


mac( 


人 myjob.com 


@myjob 


March 23, 
1972 



mw@myjob. 

com 


bb@myjob.com 5-27-69 





I’m a systems 
analyst 


I’m a systems 
analyst 


View my porn 
for free!!!! 
192.72.90.234 




I’ve been doing 
yoga for 12 
years 


铨矜出多少个同 


krry Mac^r 叫 or 还没布那么老，不玎能 B 经练过99年瑜珈。 
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垃圾数据 


r^harpen your pencil 
、‘ Solution 


以 I 、足 Man ; y > f 、 断增长的客 户数倨 庳屮的-呰你能找 
出多少个问题？ 


firstname 


Susan 


Bob 


Susan 


F0b#2938 


Jones 


Gerry 


lastname 


Smith 


Brown 


Smith 


MacGregor 


Bainfield 


email 


bday 


ss@myjob.com 1 January 


August 300 


ss@myjob.com 1 January 


www.myjob.com 


March 23, 
1972 



mac@myjob 


mw@myjob. 

com 


bb@myjob.com 5-27-69 





I’m a systems 
analyst 


I’m a systems 
analyst 


View my porn 
for free!!!! 
192.72.90.234 




I’ve been doing 
yoga for 12 
years 


1 Susan Smithy 所 . 5 [.两次 p. 




3. 记 I; 是段 mt 患 ,.. 不 系一 . 个真疋的 窖户。 . 

4. Jawe 扣料?输 4 .的 是了 个网乎是 均坫 A . 

5. ^erry M 舉成 rMPflW.ewMI 乎含 . 法 . 紙可 .除波 ?.^QW.$..Qra«L. 

6. 令 grry Mw 令 rewr 不可.能 e 经练过 99 年途谢 A . 

7 M 赛 r y 没奄換 Vs 妫的炷。 . 

8. 毎个 A . 对出生 . 伋期抑 使用 3 .不同.的格 式 A . 

9. JsMie ， . f ob Proww 和則 l PalnfleJd 的值患不金 . 


你 2 敍找 A 苒他 
闷迗唼？ 


410 
























































表卑与验证 


^Jharpen your pencil 

根据 


根据 Marcy 收 m 的数据，你要做哪些X作来确保她避免前儿贞遇到的问题？ 
对于下面的各个域，请写出你认为需要做什么检査。 


First name 


Last name 


E-Mail 


Birthday 


years of Voga 


广 aphy 
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列出需求 


^Jharpen your pencil 
Solution 


根倨 Marcy 收集的 数据，你要做哪鸣工作来确保她避免前 儿豇遇 
到的 问题？ 


name 达应 g 是一个朵填 

名穿 . 中 . 方能來 . 穿 . 母 JO. 


ii 砉崃« 

巧钧奄魚咢。 


Last name 达应杳 H 賴域。 .1：. 格… (：物 術 

名. 字中只 .能有字母。. . 


E - Mall 迖应 备是一个朵填 域^ . 

揉.靠.果.夺 i 保.它.有.含.法.的式。 .. 


^nbday 达应 g 是 :- 个 # 塡域。 . 

sm 种一致的栳式，.如 . 

MMrWrYY 硪煮类佩的暮种榜式。 


达应岩是二个必塊域 ., 


应当屋一.个数字 .,.. 而 m 要小. 子达个 a . 的年舲 .. (.根椐其 
出生 © 期來计萁）。 


Biogi ^ p^y 达应当愚一 个伞 填域 9 ..... 

可能 f 荖 一 t . 参展瞍制 
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表单与验证 


问 

Ajax 



我 决定不 S 求用户給出他们练过多少年 瑜珈、 出生 0 
期和 t 述介绍 <» 所认，如 * 有人 不想技供达些馆患， 也 玎 
UC 頮利 注册。不过必 涵要笮正碓的名.姓和 emailrttt 。 


页面的主人比你 更了解自 己的需求。 

不论你是多好的程序61，但你汴不是客$所$行 
业里的专家。所以，你做出的假设不^^ 
合适，比如哪呰域要作为必填域，可以输人哪些 
类型的数据，或者数据应该有怎样的格式。 


敁好的做法是提出验证的-些某本思路，然后与 
网站成网站相应企业真正的主人交流，确认和扩 
展你的想法。 


_ 要构建客户喜欢的一个网站，最好的办法 

^ :可以说是也可以说不是。这一章主要 就是构建客户真正想要的网站。不要对功能做某些假 

讨论验证，而不是异步请求.不过必須明确如何 设 ……而应当询问客户他们希望怎 样做。 


真正得到准确的需求并验证相应的数据，这一点 


适用于所有软件开发，而不仅仅是 Ajax 应用。 
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服 务器" 〖以访问应用的业务数据。所以, 
它可以检査数据一致性，成者完成需要与 
系统中其他数椐交 k 的收务逻辑。 



JavaScript 

客 广端 JavaScript nf 以检许 
数据格式，确保域中确实输 
人了数据，防止一些域屮尚 
无数据时就完成提交。 

绝的不 #甸甩务器廷 格式不 
还祕的數馮。在 m 菔务器生 
f 考犮41■务 J 玆. * 不|格式 
<«(•)« 




•mmrn 



Web]? W 


WcbUirfq - 彳以通过特定拕件耐数椐 
作出约束，如限定长度的文本框和 
只旮 几个适 3选项的选抒框。 

\ 

豕珩 戗地存 ( if 璀 制敦轉 
如4钱 逢过象 鞏控件琛制辁 
典.妖不震体賴子 hwS & P 1 。 



约束 



Web 服务器 



验证无 处不在 

要桉先 Web 页面互服务器的优先顺序完 
成验证 

验证通常足一 个乜括 多个步骤的过程。在 Web 页面上可以 使用某 咚控件发现 
一些问题，如使用选择框而不是-个文本框 I 可以利用客户端 JavaScript 发 
现另外一些问题,如 email 域的格式。还有一些问题可能需要由服务器完成 
验证，比如说查看一个用户名是否已被占用。 

处理这种多 JB 验证的最有效方式是尽吋能地在 WehlU'tfii h 完成9以 lL 然后再 
考虑 JavaScript ， 冋样要尽可能地在这里进行验证。 敁 后才求助于服务器。 



的个 

• C5 M 


5 f> 鸩分 

k )^ « l . 1 

劣 ： 5 

6 i 4 

器 fil^l 

1{*■¥ 

«6.1一和 


VJ ^ 

- 
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表单与验证 



以下是 Marcy 当前版本的登记表单 XHTML 。 根据412贞上的 
答案以及 Marcy 的意见，你会做哪些修改？ 


<html> 个 XHT 胤上 

<head> 杉 ti! 漱的時电。 

<title>Yoga for Programmers</title> 

clink rel="stylesheet” type="text/css" href^css/yoga-enroll.css" /> 

</head> 

<body> 

<div id=’.background"> 

<hl id= M logo ,f >Yoga for Programmers</hl> 

<div id= w content ”〉 

<h2>Enroll</h2> 

<form action= ,, process-enrollment .php f, method= ,, post ,, > 

<fieldsetxlabel for= f, firstname f, >First Name</label> 

<input name= f, firstname*' id="firstname" type="text r, /></fieldset> 

<fieldsetxlabel for=’’lastname">Last Name</label> 

〈input name=" 1 astname f ' id= M lastname’_ type="text" /></fieldset> 

<fieldsetxlabel for=.’email_’>Email</label 〉 

〈input name="email" id="email" type="text" /></fieldset> 

<fieldsetxlabel for="birthday M >Birthday</label> 

<input name="birthday" id=”birthday" type=’.text" /></fieldset> 

<fieldsetxlabel for=’_years’_>Years of Experience</label> 

<input name="years" id="years •’ type= ,, text , ' /></fieldset> 

<fieldsetxlabel for= M bio M >Biography</label> 

<textarea name =,, bio f, id= ,f bio ,f x/textarea></fieldset> 

<fieldset class= ,, nolabel ,, > 

<input type= ,f submit M id="enroll" value=”Enroll" /> 

</fieldset> 

</form> 

</div> 

</div> 

</body> 

</html> 
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约束你的 XHTML 



^%arpen your pencil 
Solution 


你的任务是修改 Marcy 的 XHTML , 对她由客户得到的数据 
增加约束。你的答案是什么？以下是我们的做法。 


<html> 

<head> 

<title>Yoga for Programmers</title> 

clink rel= H stylesheet M type= M text/css M href= M css/yoga-enroll.css M /> 
</head> 

<body> 

<div id= ,, background ,, > 

<hl id=”logo’’>Yoga for Programmers</hl> 

<div id=’’content"> 

<h2>Enroll</h2> 

<form action="process - enrollment .php" method =,, post ,f > 

<fieldsetxlabel for="firstname">First Name</label> 

〈input name="firstname" id="firstname" type= M text M /></fieldset> 
<fieldsetxlabel for= M lastname ,f >Last Name</label> 

〈input name=’’lastname" id= M last name" type="text" /></f ieldset> 

<fieldsetxlabel for="email">Email</label 〉 


<input name="email" id="email" type="text M /></fieldset> 
<fieldsetxlabel for= f, birthday M >Birthday</label> 


<select name="month” id= n month M > 、 

<option value= n f, > •- </option> 

<option value= M january M >January</option> 
<option value= n february M >February</option> 


太“巧钱含笱 不含 1 的输。 


etc. 


</select> 


〈select name= M day r, id=”day"> 
<option value= M ">- - </option> 
<option value="l">l</option> 
<option value="2”>2</option> 
<option value="3">3</option> 
<! — • • • etc . • — > 


丈杉 •丄. g 以吋 刃汾值用一 个送碲 
托， 衫出 u 个 9雠的 J 9 玢 仿 …… 


……另外的月中的0期也迻用一个选碲 
楛.萁中 f ) 出蚪<5刁找的期仿。 

苦# 哉们 妨不 
考虑年汾。 
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</select> 

</fieldset> 

<fieldset><label for="years">Years of Experience</label> 

9 以把 6 诔瑜珈的吋间 ( y e d ts ot 
experience) 刻分 寿一螫 g 间,在这 
f ii 样 l.j 分 以阇化问妊。 

<option>l-2</option> l 

<option>3-5</option> ^ 

<option>more than 5</option> 

</select> 

</fieldset 〉 

<fieldset><label for =,, bio ,f >Biography</label> 

<textarea name= M bio M id="bio"></textarea></fieldset> 

<fieldset class= ,f nolabel ,, > 


<select naine= M years" id= M years M > 
<option value=" •*>--</option> 
<option>none</option> 
<option>less than l</option> 


〈input type=”submit" id="enroll" value="Enroll M disabled="disabled M /> 


</fieldset> 
</form> 
</div> 

</div> 

</body> 


_ . 1 M ^ 


</html> 
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再多一点验证 


行测试- 

看看现在能捕获多少错误…… 

下栽或键人 sigmip . html ， 根据416页和417页的代码完成修改。然后在你的浏 
览器上加栽这个页而。我们已经解决 f 之前 Marcy 遇到的一些 N 题。 



Yeats ot txpetK 

一个这埒楛 . t 
托 金义的 选誇。 


表輩不 裆兰 印趄交 
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therejare no 

Dumb Questions 


R : 开玩笑吧？这甚至连 JavaScript 都不是……只是 
一些 HTML 而已。怎么回事？ 

^ : 如果你史喜欢使用 JavaScript 和异步请求煸写代 
码，深入纠缠 XHTML 肯定会麻煩一点。不过重中一句，如 
果能让 Web 页面做好自己的工作，你编写代码时就会容易 
得多 4 

:这么说，我要尽可能地使用选择框，对吗？ 

^:在数据输入方面，这是一个很好的原則。向 
JavaScript 提 供的敎 据越不合法，格式越不正确，你的 
JavaScript 代码要做的工作就越多。 

I 1 ®) : 如果所有这些工作都在 JavaScript 中完成.而不 

与 XHTML Web 页面搅和，这又有什么大不了的？有什么问 
题吗？ 

^ : 如果客户没有耐心，这就会有大问題、在脚本中 
编写验证代码通常很容易，佴是客户不喜欢看到错误消息, 
如果能用遠每的控件确保客户褕入合适的敫据，他们就不 
太需要由验证代码给出的错误消息。用户会得到史谕悦的 
体验，这往往很有好处。 


: 为什么要在 HTML 中禁用 - Enroll " 按钮？我们 

不 是一直 在一个 initPage () 函数中做这件事然后从 window , 
onload 调用 initPage () 吗？ 

: 在前面几幸中，我们都使用了 initPage 0来禁 

用桉钮，你说得 没错。 这里曳然也可以这么做，或者也可 
以在 XHTML 中将按钮设置为禁用。说实在的，这两钟方法 
并没有太大的差别。 

不过，在 XHTML 中樂 “ Enroll ™ 按钮另有一个小小的 
优点，现在 XHTML 确实表示了初始的页面。换句话说， 
initPage ㈠ 并不是一加我页面就完成页面絛改，所以 
XHTML 能够提供加我时页面的一个史准确的表示。不过， 
如果你更4-意在 initPage {) 函致中禁用按紅，也没有什么 
问題。 

浼有人喜赛著到迗样的 
铮誤消息，“嗔，你你铮 
3 0 再试 — 夾〃 。 
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格式还是内容？ 


5 T 认验证数椐的梏式， 
还玎 认验 证数 福¥¥容 


前面一直都很随盘地使用验证一 H。 在用户的浏览器卜.， "f 以确保用户输入 
他的名卞和出生 n 期。这就足验证的-种形式。仵服务器上，我们可以确 
保川户的⑴户名尚末被占用。这是验证的另一种形式。 


对干第-种愔况，所验证的是一个数倨格式。可以确保用户名至少包含6个 
字符，或名字域中确实有一个值，或者 email 地址中要包含一个@符号和一 
个 .com 或 .org。 验证数倨格式时，通常用客户端代码处理。 

要用 JavaScript 验证用户数据的 格式。 

§3311通过使用客户端代码来验证数据格式，可以让用户很 i 
快知道存在问题，而不必等待服务器响应。 

. 


珙计令球的 

銥佘脸证伊户 
数据的内笮^ 


有时你要做 t 多丁 .作，而小只足确保一个字符串中包含多少个字符，或 
名确保 输人的确实是一年屮 的装个 月份。可能你还需要根据数据库来检 
资数据，以防出观重复输入，或者要运行一个计算，其中涉及网络上的 
其他程 汴。 


在这些情况 F， 就是在验证屮户数据的内容。这些工作通常+会在客户 
端完成。需要将数据发送到服务器，让服务器 h 的程序检査数据的合法 


性。 



在服务器上验证用户数据的内容。 

要由应用的业务逻辑来査看用户数据的内容是否可以 
接受.使用服务器端程序让用户知道他们输入的数据 
存在什么问题。 


整 J 艮第要， 
可％绝免 
碲的数辗进 
>你的应用 
和数据虏 。 
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f 要验证 Marcy 登论页®上数椐的 格式 

f 面再来符要验证 Marcy 的 U 1 面志要做苎什么。对十毎个域，实际 h . A 是在 
验证数据的格式。这说明，使用 JavaScript 可以做到所需的仟何事情。 


以下 
ii 電來。 



鉍保 ; i t 0期 
朵用一砷一致 




" J •以使用 JavaScript 验证所有这呰域的格式，佴是下一步 
到底该做些什么？ 
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不要自我霣复 



我一击在金着达些验 ii * 求，我不认为达会布多 
难。我们只龙要遵交一姐擧件处理我序，对®页 
«上的各个域分别笮一令擧件处理杻序。 


Joe ： 比女 lli 兑 checkFirstname <) fflcheckLastname ()， 对小 
对？ 


Jim ： 没错。这样一来，我们只需为适当的域注册各个事件处理 
程序，一切就大功告成了。 


Joe ： 太棒了，那我们就 


Frank ： 朋女们，稍等一卜\我小认为这是-个好主意。这样不 
就边在多个的域上做相冏的检舍:叫？ 


Jim ： 你的意思是……就像确保一个域中包含一个非空值？对， 
是有这个问题……嗯……名、姓和 email 都要做同样的这个验证。 


7 ^ Frank ： 是这样。如果我们要对不同的域完成相同的检奄，+就 

会在各个事件处理程序中®复代码吗？ 


Joe ： 确次:， 他 说得有 道现。 这么说，可能志要有一些工具 函数， 
如 fieldlsFilledO , 这样就可以从 各个私 件处理程序调用这些 
数， PTrt ' AcheckFirstnameO ^ llcheckLastnameOKf^iMl 
JHfieldlsFilledU 来査右这些域是否为空。 


Jim : 嗯，这样更好-些。来吧， ih 我们—— 

Frank ： 再等 - 卜\我还认为可以做得更好。为什么需要一个 
checkFirstname () 兩数 n M ? 


Jim : 哦，它要调用那些工具函数。 

Joe : 嗯，暂停，我想我明白 Frank 的意思了。如采逮立工具函数 
时取一个域作为参数，然后完成指定域的检查，这柞怎么样？ 

Jim ： 似是还是耑要一个 W 数来调用对各个域的所有检査，就像 
我前面说的, checkFirslname () 之类的函数 . 


Joe ： 难道+能为一个域指定多个事件处理程序吗？ 

Frank ： 明白 f ! 所以 H ? 粒将各个验 i 正函数指定到应用这个验证 
的域。就像这样…… 
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不要 f 我重复 (pow't Repeat Yourself) : PRY 

软件设计屮的核心原则之一称为 DRY : 不要白我氓V ( don ’ lrepeatyourself ) 。 换句活说 ，一 
旦在某处编写了一段代码，就要避免在另外某个地方编写同样的这段代码。 

在验证方面，这说明不应该在两个（或者更多）地方编写 M 样的代叭来査奍一个域是否为 
空。下面来编号一个工具函数，然后反复使用这个函数。 


function fieldlsFilled() { 

if (this.value == •”•）{ 

II Display an error message 
} else { 

//No problems; were good to go 

) 


个蛾 15. 不 fet 分何 

<t …… 


_ 孑 一个痄 残老元并 
用户鏟该。 


现在可以 为多个 域指定这个事件处理程序，例如在一个 initPageO 函数 
中做如下指定。 


document.getElementById(firstname).onblur = fieldlsFilled; < 
document.getElementByld(lastname).onblur = fieldlsFilled; 
document.getElementByld(email).onblur = fieldlsFilled; 


-定的茗个该，它可以用货 
亡多个域的箏4处 ff 沒序 





如果两个不同的位置上存在同 
样的代码，很容易只修改一处代 
码而忘记修改另一处代码。如果只写一次代 
码，你的应用将更容易维护，也更模块化。 
要 记住： 不要自我重复！ 


I E^gciSe 


fieldlsFUIedO 有一个严重的问题。 
你能发现这个 N 题汴修正吗? 


_ 5 

越 1 鲊 f # 另一 个 JavaSctipt 丈 
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还记得吗？ 



潘上去不铐， Jim . 不过我觉得达能笮问娌 
特别是值达样为贞®上的间一个对象托定多个翏件 
处珥《序。 




Frank ： 但是你在 fieldlsFilledO 中使用 fthis 


Jim : 对。这正是……唉呀,这么说，一旦开始使用 

addEventHandler 0- 


你发现 fieldlsFilledO 的问题 P 马？ 如果 向一个域指定多个私 件处押 程序，就需要使用 

addEventHandlerO . 而■■旦使用这个函数，在你的事件处理程序中 “ this ” 关键字就 

不再起作用。我们是下列方法修正这个问题的。 

^ --— f 逢用 a^EventHan^etOB*} 含得 f ， )_ 个事呼的象。 

function fieldlsFilled (e) { 

var me = getActivatedObject (e) ; <~^ f 饕馎 f•) 窠溥村象 . © # : j 册到阌一个域的 

if (me. value == { 多个專蛘公 5 沒 4 不祐爲嚷軸子 - this -. 

0 

// Display an error message 
} else { 

II No problems; were good to go 

, \ 这个代廷聋 f 用 fl 中£含， 
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R : 为什么又要用到多个車件处 
理程序？ 

^: 因为我们要为各类验 证禹数 

构建事件处理枝序，比如查看一个域的 
值是否为空，或者一个值是否是正常的 
email 格式。 

所以，对于一个域，可能要指定多个 
此类工具 A 数。例如， firstname 域不能 
为空，而且只能包含字母字符。 

I ®): 这么说，由于我们要使用多 
个事件处理程序，所以不能用 this , 对 
吗？ 

^ : 说实在的，确实如此，因为 

有些域需要多个事件处理 裎序， 所以 
需要使用之前在 utils . js 中编写的 
addEventHandler () 工具 方法。 由于 
我们要使用这个方法来注册事件 处理槎 
序，因此不能在这些事件处理裎序中使 
用 this 。 


therein] 

Dumb 


qre no 

Questions 


: 如果对各个域使用一个 

shell 函数，比如 checkFirstnameO , 
然后从这个 shell 函数调用各个验证函 
数，这样不是更简单一些吗？ 

S 并非如此，把丨 his 改为 
getActivatedObject (> 并不困堆 ( 
特别是如果已经有一组辅助函 ft . 如 
utils.js 中编写的函 ft ) • 另外，如 
果采用你的做法，我们还需要更多的函 
致， 除了验证函数卟，对应各个域还 
需要一个包装器，它的作用只是将这个 
域与其所有事件处理裎序连接。 

1^) : 我觉得还是不太明白这个 

DRY 。 你能再解释一下吗？ 

^ 2 当然可以。 DRY 代表“不要 
自我 重复” ( Don ' t Repeat Yourself ). 
DRY 是一个相当著名的软件设计原則， 
其含义是只希望一段代码出现在一个位 
罝上。 这徉一来，如果你在检查一个域 
是否包含空值，这个代码只应出现在一 
处，而其他需要此功能的代码可以调用 
这个代码„ 

如果遵搗 DRY 原則，則不必在脚本中 
的多个位置修改同样的一段代码。这说 
明，你的代码将更易于绔改.维护和调 


1^) : D R Y 原则如何应用到 

Marcy 的瑜珈应用？ 

^ : 嗯，每个验 证轟数 都是一 

段代码，实现为一个 A 数.如果把 
这个代码放在单个的事件处理锃序 
中，就可能出现重复的代码。在这 
神情况下 ， checkFirstnameU 可 
能包含检查是否为空域的代码，而 
checkLastnameO^T SI 包 含同样 的代 
码 ,如果你发现还有一种史好的办法来 
实现这个功能，就必埙对两处都作出修 
改——这就违反了 DRY 原則。 

: 这么说，不管怎么样你绝对 

不会重复代码，是吗？ 

: 有时可能必 颅违反 DRY 原則， 

但这种情况很 少見。 作为一般原則，如 
果弩力遵饨 DRY , 你的代码会设计得更 
好。如果你努力了但木能做到，也不用 
大 担心。 关鍵是要尽你所能地不重4代 
码，因为从长远来看 DRY 可以让你设 
计和编写出史好的代码 3 

方令我重箕的代 
碚其务子修欤、 


试 


关于 DRY 和其他设计原則的史多信息， 维护和饰试— 

可以参考 《Head First Object-Oriented 卜 ^ ^ 去 

Analysis and Design 》 。 


dry 代碚/ 


你现在的位 S ► 425 





验证格式 


创建 E 多擧件处理程序 

fieldlsFilledU 相当简单。下而再为所需的另外一些事件处理程序编 
写代码。各个事件处理程序的编写类似于 fieldlsFilledU : 通过使用 
getActivatedObjectO 可以得到激活对象，然后验证相应域的 格式。 


function fieldlsFilled(e) { 

var me = getActivatedObject(e); 
if (me.value == f,M ) { 

// Display an error message 
} else { 

// No problems; were good to go 

} 


} 

function emaillsProper(e) { 





var me = getActivatedObject(e); 

if (!/"[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/.test(me.value)) { 
// Display an error message 
} else { 

// No problems; were good to 

} 

梢后金 s ㈣ 在锌 •: 異和不得存芎 
㈣ Mu 衫$袋，不 
过现 存芍以 光僅用这 螫‘: 生釋。 



这蓮检奢 ewd 格式的汪則表 H 式 
(Sit《HMi Fast 7dvdScti>t> ) 
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这个举4钍 if 沒萍检 t 一个域二 
^含 4 〜 1 的穹备.不®分 <•)’ 英。 

function fieldlsLetters(e) { 

var me = getActivatedObject(e); 

广 .… i 

var nonAlphaChars = / [ A a-zA-Z]/; 



f 罨嵙中！ S P . 


>2! 另一个表 d 式 达爰 


if (nonAlphaChars.test(me.value)) { 


// Display an error message 
else { 

// No problems; were good to go 


郎么 2 杖不宅龛 由芩备 戌成 ， 


} 

function 


係•个域的 

f ieldlsNumbers (e) { 名中 • 口含教字 0 


var me = getActivatedObject(e); 
var nonNumericChars = / [^0-9]/; 
if (nonNumericChars.test(me.value) 


ii 个表 2 式祷获數 40 〜 9 纪®以外 
(叆用•符 名） 的字符。 


// Display an error message 
} else { 

//No problems; were good to go 

} 


Hi 式的考 
《Head Pi：st JavaScitpt》<» 



r^harpen your penci 


il 


既然有了 $ 件处 现程序，你能为 M a r c y 的戍 ffl 编芍 
initPageO 吗?创比 -个新 脚本，保存为 enroll . js „ 增加卜.面 
的唭件处理程序以及你编笱的 initPagc ()。 然后江 Maixy 的 
XHTML 屮引用 enroll.js 和 utils js 。 

尝 W 加栽登记豇面。它会对你的输人进行验证吗? 
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避免 


^Jharpen your pencil 
、‘ Solution 


你的 fT: 务是为 Marcy 的瑜珈孤面编写一个 initPageO 函数，并 
使用前 向两 面的事件处理程序来验证用户输人, 


window.onload = initPage; 


. 本 f 在用户稃出 ij 个 

域时 进行給证…… 


function initPage () { 



.••••• 聶 i . 个省 

M 备个域…… / &蓽 M ㈣4。 

sy 

addEventHandler(document.getElementByld<"firstname"), "blur", fieldlsFilled); 
addEventHandler(document.getElementByld("firstname” >, "blur", fieldlsLetters) 
addEventHandler(document.getElementByld("lastname"), "blur", fieldlsFilled) 
addEventHandler(document•getElementByld("lastname">, "blur", fieldlsLetters);S 
addEventHandler(document.getElementByld<"email” ）， "blur", fieldlsFilled) 
addEventHandler (document .getElementByld ( f, email M ) , "blur", emaillsProper) 

} » •喳蛾释宅 5 多个搴碑 







alert () 会让=切都停顿……而用户不希望停下来。 

使用 alert (> 是一种非常笨的方法。这个小弹出窗 
口会把页而1:的所有工作都置 P —种停滞状态。之 
前,我们曾使用一些图铋来 it 用户知追发生 r 什么。 
但是那种方法存在一个问题，特别是如果试图对 
Marcy 的页面应用那个方法时，这个 I * 口 j 题会更突出。 

为什么简中.地允汗桁绝阁你对 M arcy 的!; ( 而不适 
用?你还有什么不同的做法? 
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我党得我们龙 g 吿诉用 户他们的狼入存在 什么问 
越。未在域中狳入任何沟容鸟狼入的数榷格式不正 
硇 （ ttfieewail 数掩）布很大 B 别.只是一个大釭叉 
( “X” ） 对子 B 分到眹出？ 什 么问越 没布太 大帮助。 


Jim ： 有道理。所以对 T 毎个错误,应该可以显示与这 


Joe ： 仉迠可能没介这么简巾吧 


Frank ： 是的，你发现问题 T ， 对不对? 


Jim ： 什么问题? 


Joe : 嗯，我们来看通用事件处理函数。这些函数不 


知道它 ff I 要测成哪个域，所以它们+知道要显示什么 


错误消息。 


个错误有关的一个消息。比如，“请输人-个名”或 


者 “ E - mail 应采用 name @ domain . com 的格式”。 


Frank ： 没错，这看起来对用户更友好。 


Frank ： 对广。我们需要一种方法将 组 错误消息又 
联到各个域，然后再想办沾奔找适3的错误消息。 


Joe ： 激活对象怎么样?我们可以在事件处理程序中得到激活对象，所 
以是不是可以使川这个对象来许找错误消息？ 


Jim : 嘿，我有办法了。能不能维护一种名/值结构，其中包含一个域 
的名，而对应这个域的值是-个错误消息? 


Frank ： 我喜欢这个办法……我觉得这办法 能奏效 这样-来，就可 
以根椐域名査找错误，而域名吋以从激话对象得到。 

Joe ： 仉是甸个域会小会出现多个 M 题？毎一个域耑要多个错误消息。 

Frank : 嗯。所以对应各个域要有一个键,兄外要有一组错误和相应 
的消息。是不是? 


Jim ： 怎样在 JavaScript 中做到这一点呢? 
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JSON 归来 


JavaScript 之孑 桕来 


上一琪中，服务器端程序使用 JSON 来表示复杂的对象结构。不过 
JSON 并小只川 r 服务器端!只要需要表示名/值映射， JSON 都是绝体: 
的解决 方案: 


个的象的変.發名 



itemOetails . id(/f) <£ ^ 


itemDetails = { 

"id” : "itemShades" , 



itemShades^ 


"description” : "Yoko Ono's sunglasses. 
"price" : 258.99, 


M urls M : 



["http: //www• beatles.com /’’， 
"http: //www. johnlennon.com / f, , 
"http://www.yoko-ono.com /"】 


ue ^ Oetadi . utts 的依 4 -个僅艟通。 



厲性的值玎吆是另一个 

Ja vaScript 对 % 

你已经看到属性可以有串值，整数值和数组值。不 过属性 还可以 
把另 一个耐象作为 M 性 fft , 仍以 JSON 衣示。 


itemDetails = { 

"id" : "itemShades" , 

"description" : "Yoko Ono' s sunglasses. 

" price " : 258.99, 

"urls" : { 

^ f. ^ ^ ^ ^ "band-url" : "http: //www.beatles . com/ 

_ 个的象 "singer-url" : "http://www.johnlennon.com/ 

'owner-url" : "http : //www.yoko-ono.com/" 


这一 : 欠 “tls A ft 的從盎另 
一 个 JSON 象矛的的象， 


, ^ 


itemDetails.urls.band-url 




itemDetails.uris.singer-uri 


} 


•F W. i & " ic" 一个拉作 
夯皋#阄 Cj # 嵌套 — 


itPmnetails . url ^ wner - uri . 
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JSOJV 赇 


你能用以下的磁貼迮立•组映射吗?要提供各个域的表示，毎 
一个域会冇一组映射，分別将一个特定的错汉类吧映射到该错 
误的相关消息。 
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// 


你能用以下的磁贴达立一组映射 p « i ? 要提供各个域的表示，甸 

一个域会冇 - m 映射，分別将一令特定的错误类犁映射到该错 
误的相关消息。 


f 个吋象 

的変|名 


var 


warnings 


firstnaxne 



c ： 


的 6 备个诘扣技蛾的备个管苦 
耷一个神玄的抟#決矣。 


•« 

recruired ，• \j 

[ 

Please enter in your first name. I 


letters K 

I__ 

_ 

f 蜃 

Only letters are allowed in a first nam< 


st name. 


时子 It 威殆 f 2 
的备个域夯一个 ' 
龙鉍朽 1 


lastname I 19 . 
required I ••. «• 


Please enter in your last 


name. 


letters 


丨 •• • M 

釋 


Only letters are allowed in a last name 
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了® f tMarcy 的窖户，涛出他们的输入冇问越 

利禽所存错误消息的 warnings 对象，吋以向 Marcy 的页而增加焚告。仵各个售件处现程 
序验 ill: 闲数中可以得到以下信息。 

o 通过一个激活对象得到笛要验诎的域。 

o 所出现 问题 的特定类型（例如，我们知逬一个域是否为空或 
格 A 是否不 m 确）。 


根据这 呰信总 ，在 !^ $• 中需要做到如 F3 点。 
o 确定有问题的域的父节点。 

© 创达一个新的 <p>, 并把它作为子节点增加到该域的父节点。 

Q 奔找适当的焚告，增加该焚告作为新 <p> 元表的义本，这样 
浏览器就会在表甲 . h 显示这个鳘告。 


对 T : Marcy 的表中 以下是 处押这个功能的 warn () W 数。 


function warn(field, warningType) { 
var parentNode = field.parentNode; 
var warning = eval(warnings. + field.id 


2 含馎出泛个域扣梦若荦 


warningType) ; 


if (parentNode.getElementsByTagName .length — 0) { ii 个检 f 用子奢 

var p = document .createElement ( ,f p M ); 〜 ^ 个以馮 C 你加警若 ° 


var p = document •createElement (”p">; ^ 

field.parentNode.appendChild(p); 

var warningNode = document.createTextNode(warning) 
p.appendChild(warningNode); 、 

else { 

var p = parentNode.getElementsByTagName ("p 11 ) [0]; 
p.childNodes[0].nodeValue = warning; 


document.getElementById< M subinit’’> .disabled = true; 


如 f … 个 < P > 
_ 包含 it 沾？苦的 


这个 - els *' 的在0餞耷一 t 
' 〜"一 < P > 无棄 的伐况.巧以在其中 

增加薈苦。 

釦粟乜问蛀.砝侈 
" E*notr 括往不铛#壬， 
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使用 JSON 提供菪告 


前面儿页已经做 r 很多工作，进行测忒之前，还耑耍完成几个步猓确保前而的1:作确 
实 奏效。 你：要做以下工作。 

根据432豇的荇案在 enroll . js 脚本 屮增加 warnings 变 M ;。 |可以把这个 
变说故在阐数以外的仟何位苦，弓 windmv . onload 事件处 ffllfV : 序的 
指定在同一 “层次”上。 

W 外根据433 ! J ( 的代 ㈣ 在 enroll . js 屮增加 wam < ⑽数。 

更新各个验 ill 函数，如 fieldlsFilledO 和 fieldlsLettersO , 使之在 
出现问题时调用 warn()。 要向 warn() 函数传人激活对象和-个串， 

如 “ required ” 或 “ format "。 査看432 豇卜 . warings 变缺的值，河以 
得出对应各个鰲告类甩 使⑴哪 个卞符屮。 



tfiere«ire np 

Dumb Questions 


I 1 ®) : warnO 怎么知道它在为哪个 
域增加餐告消息？ 

^ : 各个验证函敔都知道 

在对哪个域完成验证，因为有 
getActivatedObject (>。 所以当夢 
件处理函牧调 fflwarnO 时，这个函 ft 
会把激活对象泠给 warnU 。 

: 那么營告类型呢？这从哪里 

得来？ 

^: 詧告类型针吋于事件处理函 

牧. f ieldIsFilled <) 的臀告类型 

为 “ requirecT ，因为这正是这个 { 欠 
所要检 查的： 查看一个必填域是否有 
值 8 


每个事怦处理裎序都要传递一个警 
告类型，与 warinings 变量的某个 
预定义值匹配，如 “ required ”、 
“ letters ” 或 “ format ” 。 

1^) : 那个 parentNode 又是什么？ 

^ I 我 fn 希变把赘告直接增加 
到具体的蝓入怄下面.如果得到输入 
怄 （域） 的父节点，就可以把警告增 
加为该节点的另一个子节点.其结果 
是，这个警告消息成为输入域本身的 
一个兄弟节点…… 并見直 接显示在这个 
域下面 .. 

I 1 ?) : 營告消息来自 warnings 变虽 

吗‘•， 

^ : 完全正确.我们把这个消息 


放在一个 <P> 中，作为这个域父节点的 
一个子节点。 

: 那行 evalO 代码是做什么的？ 

我有点不明白…… 


^ :首先 

容： ' warnings . 1 


请看计算的内 

+ field + 


+ warningType 。 这可能 
warnings . firstname . 


required 1 或 ' warnings . email , 
format ’。 它们分别映射到一个铬误 
消息，这正是我们想要的。 


所以要计算表达式 w a r n i n g s . 
first name , required , 需要在这个 
表达式上运行 eval (> , 这会得到与之 
对应的错误消息，然后显示在登记表 
单上。 
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来尝试更多错误。 

确保你匕经父成了 434 豇上所列的各项仟务，然沿 T (新加茈 Marcy 的登 id U ( 
曲。 W ： 荇输人一呰“不好的”数据 m 合： 装叫域+输入值、输人一个不合法 
的 email 地址，尝试作姓名域屮输人数卞。会发生什么惝况？ 
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eval () 并非总是不好 



如果你能控制_所计算的数据.就可以安全地使用 
evalQ。 — 

在第10章中，我们计算的是来自一个服务器端程序 
的数据。这个程序不是我们编写的，而且尤 法奍到 
源代码，所以计算这个代码不太安令。我们无法确 
保代叽足合法的 jSON ， 相应地能够安仝地在 Mi 广的 
浏览器上运行。 

但适对十 warnings 变最，要 i 卜算的代码正足我们 
自己创建的,所以没有任何危险。实际上，我们可 
以进行测试,如果存在问题，只需修改 warnings ， 
闪此仵你能够控制的代码上运行 e va 1 ( >足相当安全 
的。 
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如柒没冇调用 warn (}， 就必领调用 unwanid 


豇由⑷:在•个严 T (的 NM ; 用户的输人没有仟 HIH 题时如 M 上除那些错 
误消息呢? H 前我们的错误处理程序如下。 


function fieldlsFilled(e) { 

var me 二 getActivatedObject(e); 
if (me.value == ."•} { 

// Display an error message 

warn(me # M required"); ^ - - - 

} else { 

II No problems; we 1 re good to go 


⑽ r”() 各魃希 f 沒表輩 f $ •子抟 # 

夕 C _ - 

3 obby 98 

Only letters are allowed In a first name. 


} 




如羃•: . i 耷 《 何问垃 
去畛, fei <5 抟 。 



如柒冇警告洎息，就要将其去除 


Ftfil 来构让-个 unwarn (} 函数•第•部分非常简申对千传入的域，只 
宙 仵召足 ☆存在 个 焚告。如果有，则将这个焚 告 去掉。如果没冇焚告， 
则不沿要做任 HTJ 乍。 


只苟劣 f 少存存一个 
苦的 < p > 的;4 
«去餘警苦, 


function unwarn(field, warningType) { 

if (f ield.parentNode.getElementsByTagName (••p^) . length > 0) 
var p = fieId.parentNode.getElementsByTagName( M p M )[0]; 
var currentwarning = p.childNodes [0] .nodeValue; 匕 — 去轉 _ 个遑 

var warning = eval (• warnings • • 十 field, id + ••• + warningType); ^ ^ ± 

嗲杓 1 f 令 > 

if (currentwarning == warning) { 

Pm I 耷 1 入的 
ln 9 T iPeS fgfp ) ^ ^ 味这个 

一 如菜 f 咅 31 智匹 K . 則去 


fieId.parentNode.removeChiId(p); 


WflTfWi 

罾苦 



unwam () 还小 Vil 全。这个函数还需要确定 “ Enroll ” 按钮 Mi 当启用还是禁用。请写出代 
码，确定是否已经敁示焚告消息，如装是， “ Enroll ” 按钮 则应 禁用，否则，用户可以 
点击 “ Enroll ” 按钮来提交表单。 

°玷： VllW 丄 HX 坤邳巩焱 fv ^ H 知 9 lMr # 丫 .11" 明 M 婢财 L «1 备 罢谁啤：比褂 
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行测试- 

打开和关闭筈告。 

现在再对登记表单做-次测认。在各个验证事件处理程序屮,如果不存在验 
证问题 则增加-行调用 unwam(me); 的代码。看 t 去很不错，足不是? 



數旖不合法的含 
S 承待 t.l . 


嫌 ft 所奇教 
馮布差含4 
的. ^ iW . 4 
用 Bntoll ~ 
接扭 • 
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验证至关重要! 



O 


你孖坛笑吒？所 笮达巷 R 是为3在窖户攜完成一 
令小小的验 a 吗？ 达笮*茇谬 吒，不是吗？另外， 
达里有 Ajax 的沟容吗？ 


验证是一个吃力不讨好的工作……但是每一个应 
用都需要验证。 

从灰黾得到正确的数据通常相3烦琐，而且要花很 
长时间 来完成验证。不过，对于大多数客户来说验 
证都非常重要。以 Marcy 为例: 如果没有正确的数 
据，她就不能完成课程登记，也不能向潜在客户发 
出邮件，自然无法开展新业务。 

这一点同样适用于付钱让你开发的所有 Web 应用， 
验 ill: 都是 至关氓 要的。尽管 Marcy 的 登记表 黾没有 
发出异步请求，但这仍是一种典型的 Web 应用，作 
'M •个 Web 开发人员，你会经常开发这种应用。要 
知进，没有多少程汴员会完全依赖 r •异步请求。 

所以还足多花点时间在豇面 h 完成验证。这样一来， 
你的客户肯定会对你人加赞赏，他们的业务也会纷 
至许来……这怠味矜，你会有史多的 T . 作、史好的 
回报，以坆 电少的 打扰，否则你可能经常保 t •夜被 
电 I ?; 吵醒， 告诉你“应用出 r 问题”！ 


每—个应伊都 
费要验证/ 
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^^arpen your pencil 


以 卜是 Marcy 的数据库和 410 贝上我们找出的问题，请在每个 
问题 frllfti 说明你对伎 id ■ 表单所做的修改是否已经修 lH r 相应 
问趙。 


firstname 


Susan 


Bob 


Susan 


F0b#2938 


Jones 


Gerry 


lastname 


Smith 


Brown 


Smith 


email 


bday 


ss@myjob.com 1 January 


August 300 


ss@myjob.com 1 January 





I’m a systems 
analyst 


I’m a systems 
analyst 


View my porn 
for free!!!! 
192.72.90.234 


MacGregor 


www.myjob.com 


mac@myjob March 23, 


1972 




Bainfield 


mw@myjob. 

com 


bb@myjob.com 5-27-69 



I’ve been doing 
yoga for 12 
years 


1 Susa vi Swithii 册？.两衣 . 

2. If ob Rrowu 进名绐出他的 email 班址 . . 

3. FQMmiZ 录是.炫坂偖忠 . 不是二个真疋.的.害户 . 
4.4 aifie Jotiesl ^ A 的基二个 R 轱 VH ... 兩不異神地域, 


5. frerry. Mac^rcgori^ewai!^ • 含法 佑可能泯 2 .com s^ .org ( 

6. (rgrry Mwto.wr 不可. 能 S 轻练过 9 9 年成珈 a . 

7. Mary 没奄输 娣的饯 . 氏。 . 


8. A . 对生 .0 郗使用 . 1 不同 .的.格式 


9. Jane Jom、lQb frown 和 Wll Ifalnf ield 的信忠不金。 . 
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大屋改逬 



parpen your penci 
、- Solution 


我们已 经增加 r 很多验证……不过这些验证具体解决 r 哪鸣 
M 题？你的任务足叫确我们增加的验证 " J ■以避免哪呰 M 题。 


email 


bday 


firstname 


lastname 


ss@myjob.com 


1 January 


I'm a systems 
analyst_ 


Smith 


Susan 


Brown 


August 300 


Bob 


Smith 


ss@myjob.com 


1 January 


I'm a systems 
analyst_ 


Susan 


F0b#2938 


View my porn 
for free!!!! 
192.72.90.234 


Jane 


www.myjob. 

com 


Jones 


MacGregor 


mac@myjob 


March 23, 
1972 


Gerry 


mw@myjob. 

com 


I've been 
doing yoga for 
12 years_ 


Bainfield 


bb@myjob.com 


5-27-69 
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1 Susan Swithvi 册 J 两次* . 

2. lfftb . Rn»wu 没有绐.出 . ft . 的 ... :江 

- - - - —_ 签 P If 由枝名六 

3 是圾馆惠，不是一个炙正的 窖芦: ^ 

4. 私叫.扣 I 咐檢的是-:个网蛣 v 以,.而不连? . ^ 

5. Crerry MwOfwwr 的牌身"不 .含法 你 .H 洛. J . cpw^.org •. .. . 

6. (rerry Mw 夺 re 卯 r 不可能 S 轻练过 9 9年瑜珈《 . 的抒複 

7. 没奄梭 VS 妫的.雔氏。 . 5 . ZZZ ^^ rr ... 可以 迕免 ci 签。轻出 

8. 毎亡 A . 对生 . 0郗 a . 甩 .7 ..不 .同的 .格式 . a . 5 . $ ° 


ii 沒耷增扣分何妗伍来钍 
Ifd 个闷蛀. 




9. Jane jQne$,..Rob frowns Pill fainfkld 的值 JS ： 不金 





















































表单与验证 


重 t 数椐 If 要服务器 解决的问题 

现在只剩 F —个 H 题，这就足可能釘人将估息输人了两次，如上一 
供•卜.的 Susan Smith。 但是这种问题要由 -个 服务器端程序来处理…… 
服务器 需要取 一个记录，将它与 Marcy 客户数倨库屮现有的 i 己录相 
比较。 


Web 页面 


Web 服务器 


数据库 



……任 由暹务 器 
化问蛀 …… 致伐^ 


玎认利用异步请求采傲到 



- k / •总 萸务器1 
-来砝保 數将一 ^ 

Ji 係數轉一致3的畸 一方: •在 
杖44详加扣 记录二 箾先检 
查劣前 记录。 


假设我们构违了一个服务器端程序，它取 )11 户的佶总，然店检丧 
Mmxy 的客户数据库来奔看这个用户足否 匕经 存在。可以在我们的 
JavaScript 代码屮使用一个异步访求 U；M 这个程序，一旦服务器返回 
•个响应，可以让用户知道他们的数据已经被接受。 

•…"侄是 迖样有 什么好处噍？ 

唯一的问题是，用户等待时并小需要做 什么。 我们至少要使用他们 
的名、姓和 email 根据数据库进行检资，所以，在此期 H 用户最多能 
继续输人他们的出生〖I期和 A 述佶息，而这些并不是必填域…… 

用户 尝试登 记时，如果 ih 服务器检畓:用户的佶息并发出相应的错误， 
实际上这样更好-些。山卩目前重 S 的用户信息 还小算太严® 的问 
题，你 "J ■以少写很多额外的代码，只需 il: 服务器处理 并向用 户报告 
错误 • 


有时，最妗 it 勝旁 
粽 J © 歩地处琺洵题 0 

并;^ 長所有 Web 应 
用鞒霈要异步锖求 
和响应/ 
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又一个满意的客户 


现在大功 t 成3 ,是吗？ 

没错，我们 Li 经处理了 Marcy 的所饤验证问题，她打算 ij： 她的服务器 
端程汴员肴 肴如何 避免重 k 数据。实际卜.，卜‘面来看 Marcy 对这个 
新登记页面多么满意…… 



^ ^ n 


9 J "r^ •TOW* - ay« Cf'J J ' 


PR 3 SRRmERS ii 

°v * 


Enroll 


Rrsi Name i-r；* 

Last Name 味 •w' i 
Dnatl aw 

Birthday l-> • 23 • 

Yean of Ejcpenence «»I ， 

Biography : p • *W4_-: •、 

w ^ w _-.lO :: «p«. 易 S:R, Tor.> 

P •: M 4r^i Fww 曹 r To^«. 


t 


哇.简盗抻杲？。 i ) 认达令应用上 
线，毎薄的贅记 t 是原采的2馆，我爯也 
没布遣遇舒枝的数拢问雄。你布金 向贅记 
我的 R 站码？ 
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12 POST 清求 



有人正在看着你。说正经的.就是现在 9 

不是有信息法案自由吗?不是叫做国际互联网 ( Internet ) 叫？现如今, 
用户在表单电键人的任何内为或者在 Wcb 豇向卜.所做的任 H 点击部会 
逍到监视。监视你的人可能足 -个 M 络莳现(4,成荇足想了解你意向 
的软件公 司， 也4能适 -个 恶总的黑客成投放垃圾邮件的人，不论怎 
样，你的信息足不安全的，除作你有意采取措施保证它的安全。对于 
WebUd 来说，必须在用户点 杰 “ Submit ” 时保护用户数倨的安全。 
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垃圾邮件……又是垃圾邮件! 


影评 R 站1遇5坏宗仗 

就在我们认为已经解决了 Web 世界 的所飪问题而 满心欢咨时，先前的 • 
个客户又回来了……而且看起来他很不商兴。 


我遇到麻焯？。颉客孖始向我坨 
怨……他们总收到垃圾邮件.他们认 
为达是 ©为注册了我 的彩评 R 站的缘故。达是 
你写 的代码……所认你晟好藓决达个闷》! 



你的代码……你的问题！ 

Mike ( Mike's MoviesM 站的| 人） 义遇到一个问 
题。 看起来 他的客户收到垃圾邮件确实 U 我们为 
Mike 构建的注册表单有关，由 f - 那个表单是我们构 
_，他对我们很不满。欢迎参与 Web 开发解决这 
个问题。 

你认为发生 r 什么问题?是不是由干我们在登记表 
申.中所做的餐情(或者未做的)使得发垃圾邮件的 
人能得到 Mike 客户的 email 地址，有没有这个 wj ■能? 





me 

播承®。 
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POST 请求 


他的客户收到垃圾邮件 i-j 我 

们做的 r. 作冇关吗？ 

以下是 Mike 的斑而和服务器。你的任务坫_出它们之间的 
所釘交汪， «：kWWebi；iifii U 服务器之 NfV 递的仏息。 

不$朽心 •箕 冰用 户的鋅玄作左 ... C : 

东？; i 贡兩如呢务器心’采至'备 1 上 


^|j9「pen your pencil 

Mike 的汴 I 


Mike 的注册页面有 H •么问题? 



注册页而 


你认为我们做的哪呰I:作 WMike 苒户抱怨的问题存关? 



Web 服务器 
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暴露的地址 



你的任务是画出 Mike 的奴面与服务器之间的所冇交互，要 
乜含 We b 页面和服务器之间来回传递的信息。以下是我们的 


username s jjenkihs 


usernawe^jjeiikins 
password*iheartalba 
eiHail s jj«mae.eom 
(other request params) 


Web 服务器 




e ?? r 祆 u j 一也住逋时 涝岌达 w 尸的 z 遭 ...... 

email 地址 . 这样安全吗？会不会冇人得、兴们栌代砝逢成斤 

到迖个 email 地址然后向阁户茗垃圾邮仵哝？ 
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POST 请求 


& ET 清求将清求参数作为硪文在 
网络 上传逄 


我们使用 GETU 1 求向服务器发送所有…户佶息。 


»< fjJS £ e » Usr ?( >用 _ 个耳涉 


’’Processing" ••’； 


function registerUser() { 

t = setlnterval C'scrol 1 Images ()'•, 50); 
document .getElementById( M register'*) .value 
registerRequest = createRequest(); 
if (registerRequest == null) { 

alert( M Unable to create request . M )； 

)else { 

var url = M reg is ter.php? user name + 

escape(document .get ElementBylcU" user name" > •value} + "&password=" + 
other request parameters •…” ; 

registerRequest.onreadystatechange = registrationProcessed; 
registerRequest .open ( ,f GET M , url, true); 
registerRequest.send(null); 




} 


爸诂蛐求的象 
沒用 QET 方法发逐硪求。 


硪文就是 . 明硪白白的文本！ 

参数使川 GET 跻求发送时，那些参数 H 是作为文木在 1 «]络上移动，而且这 
个文本采用明文形式发送。换杓话说，任 M 监听网络的人郎以提取这个 
文本。 



注册页面 



username s jjeiikiiis 



password s iheartalba 



eiMail s jj€>mac.coiM 



(other request paraws) 



㈣ 槪治4巧 



Web 服务器 
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POST 敏感数据 


POST 清求&芨送硪文 

我们需要•种方法发送冏样的这些数据,但足+会把数据作为明文 
在 M 络I•.传递。这样一来，别人就不能四处唤探，窃得 Mike 客户的 
email 地址，从而能•劳永逸地解决这个垃圾邮件问题。 

幸运的足， POST 请求正 坫这拃做的。 POST 采用•种 WGET 完全不 
间的方式发送请求。卜‘曲来广解 POST 沾求。 

& ET 清求疰清求 URL 中芨送数掩 

GETW 求将数倨作为沾求 URL 中的一部分发送给服妗器，将沾 
求参数作为具体 URL 的一部分。 


0 





register.php 蚂？对 . 我想注 册彩评 R 站。 
我的名字是 John Jenkins, 我的 email 地址 
^ jjcwac.com. 我备欢动作 ft 。 我最#欢 
的是 Casino Koyale 。 


只龙冇一个薄价的闷绍嘆獾 
器，分何人邾 ； T 以由吝户栌 


register . php ? usemame = jjenkins&password 

_ = iheartalba & firstname = John & lastname=Jen 

kins & email = jj @ mac . com & genre=action 


在 碡求 中.黾达洽轚务器栌 
款轉0 4汶求 URL —讲分1 & 


ii 个 ( J(Ug 秸 
和咨在…… 



存*杉的蟥 求中 . ii 个 URL 中的丈《鞾琛 言兩枵 由 
JavaScript escape()S) ItiHiS- 不 (2, (if 来 (2G 镥 
砝. ii 样理 《? 容务一#。 


哚务 器璉脚本认碲求夺数 
的謇户數典虞。 
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POST 请求 


POST 清 求崖送 的数播乌清求 URI 分离 

在-个 POST 请求屮，必须发送到服务器的数据与 URL 是分离的。这样 
一来，不冉有包含数据的庞大 URL ， 也不会在网络上发送作为明文的 
客户数据。 





I ， 






POST 

数据 





■SF 騎 a 

每 URC •“： 伐老 12 普老沒 


斿 jj ) P 0 ST &4 鹆砝。 
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服务器解码 POST 数据 


POST 清求中的数椐在到达服务器 

之前 8 经编码 

- -个 POSH 它会确定收到的数_什么㈣，％后将这 

个信息传递到请求 URL 指向的程序。 



^ 7 i£ 4 -个 POST ■作求 
请求 (JRC 中不电含教馮 


务器打 ^ P0ST ^ - 一 ^ 

求. 4的碲求款轉 一 ^ 


鬼务 器矗后 将啟典缚连利 
URL 中琢來戌求的趕埤。 


多器球沒 


452 第 12 章 


register , php 







POST 请求 


tliereiui 

>umb 


ore np 

) OuestiQnjs 


Pi : 这么说 POST 请求比 GET 请求更安全，是吗 ？ 

^ 2 对.包坟 POST 数据时乃卟增加了 一步： 数据在洌 
SL 器中编码，并在服务器上解码。不过，对 POSTI 1 据解密 
可不是轻而易举的事情，也许有些•特别执着的黑客确实能 
解开你的 POST 扠据，但与从 GET 请求的 URL 获取请求参軚 
相比，解开 POSTft 据需要做的工作会多得多„ 

如果确实希望保证请求的安全.必项使用一个安全的网络 
连接，如 SSL 。 不过这超出了本书的范畴。 


Pi : 那么.你的意思是不是说 POST 考安 全的而 
GET 是不安全的？ 

^ : 也不完全是这样。“安全”和 ** 不安全”都是相 
对的，不可能《測到可能出问题的所有情况 • 不过，使用 
POST 向服务器发送 ft 据时会多完成一个歩驟来保护教据^ 
有时正是这一步会带来很大区别，有了这一步，用户会正 
常地收到你的每月 时讥； 而没有这一步，同样的用户可能 
会频繁收到垃圾邮忤„ 


Fi : 既然 POST 仍是不安全的，这对于 Mike 的客户有 
什么帮助呢？ 


: 既然如此，为什么，不把每一个请求都使用 

POST 发 送呢？ 


^: 大多 故发送 垃圾邮件的人都会寻找最容务的攻 

击日标 • 大多啟情况下，只要稍有些麻煩——比如需要对 
POST 敫 据斛码——就足以驱使发送垃圾邮件的人和黑客转 
向一个史容易的目标。对于 Mike 的站，改为 POST 请求需 
要我们多做一呰工作，但是这会保护他的 H 站兔于遭到大 
多啟恶意攻击。 

Jt 雜;^ —点安 
纟惟往往大有妗处 。 

对锖求数据编碚佘谀大 


W * i 确实没有这个必要一方面，对 ft 拢编码和解码 
需要耗 f 一些处理时间.除此以外. GET 对于发送较短， 
非秘 密的啟 据表现很好。不忟如此，如果使用 POST 发送所 
有请求，用户将无法享受到 Google Accelerator 等工具带来 
的好处，另卟有呰搜索41擎 spider 工具可能无法提取出你的 
链接。 

: 要发送一个 POST 请求.所要做的就是把请求数 

据放在 sendO 方法中而不是 URL 中.是吗？ 

^: 完全正确，你会以完全相同的格式发送敌据„ 

可以把名/值对传递到请求对象的 sen d () 方法，这与发送 
GET 请求时 / L 乎完全相同。 


多势異著转芮导找你的 
WebJ ® 銥％外的另—个 


问: 

答: 


就这么简单？不用做其他的吗？ 

嗯，下面在 Mike 的页面上试试，看看会发生什 
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用 send () 发送 post 数据 


使用 sendO 在 POST 清求中崖送清求数維 


在 GETU 1 求中，所有谓求数椐都作为请求 URL 的一部分发送。所以可能要迮 

立很 的 URL ， 如 register . php ? username = jjenkins & password =. 

但是，由干 POST 请求中请求数据不作为 URL 的一部分发送，以把所有数据直接 
放在请求对象的 send () 方法中。 

function registerUser() { 

t = se t Inte r va 1 (•'sc rol 1 Images ()'\ 50); 

document .getElementByld( f, register") .value = "Processing. 
registerRequest = createRequest(); 
if (registerRequest == null) { 

alert ("Unable to create request.t • 葦求 URL o 是呢条器 i • 炫 4 的二找 

名.系不®含请 求参 麇。. poST 衫中不 tf 在淺求 

一 敌邛痢面扣一个闳咢。 


else 

var url = " register.php"; 
var requestData = ’ •username: 


escape(document.getElementById( f, username M ) .value) 


+ ,, &password= , ' + 
+ *(TJirstname= w 


'&genre 3 
， & favorite= M + 

+ *1( S ^ astes= M + 


ii it # 个數 

竹 r 4 ； escape(document .getElementByld( , 'passwordl M ) .value) 

URL (if*® escape (document .get ElementById( M firstname n ) .value) + M &lastname M = + 
^ 〆 个 escape (document .get Element ById( M last name") .value) 

穿将毐变 蓍中。 escape(document .getElementById( M email M ) .value) + 
escape(document .getElementByld( ,f genre n ) .value) + 
escape (document .get Element Byldf* 1 favor ite 1 ') .value) 
escape (document .getElementByld( ?, tastes'*) .value); 
registerRequest.onreadystatechange = registrationProcessed; 
registerRequest .open ("POST ”， url, true); 
registerRequest .send (requestData); 

\ 

ilfh •青求村象的《"以)方: 


同 样迻用 &穹 
/ 符分味参款 。 


} 


▲ - 个 POSTt , 求。 




问 

答 


tliereiare no 

Dumb Oue^tJQns 


为什么不需要一个问号？ 


问 


: 但是还熏要&符号，是不是？ 


问号丨？）用于分陆股务器瑞裎序名（如 register . ^ : 对。&用于分塥不同部分的軚据。这会告诉服务 

php ) 和请求数据名/ 值对。 由于 POST 请求中并未将请求 ft 器一个名/值对在哪里结束，下一个名/值对从哪里开始^ 

据遠加到裎序名后面，所以不再需要这个问号。 
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POST 请求 


运行测试 - 

利用 POST 请求保护 Mike 应用的安全。 


根柄 454 (的代码在 validation . js 屮修改你的 registerUserO ， 然后甫新加栽 Mike 的 
注册页面，输人•些数据。试着提交注册表单……它能不能按预期的力式正常工作？ 



釋！ E 翻 


Welcome to Mike's! 


Read Reviews 
Write Reviews 


4上去-<刀正常 . 

样片热知迮叛务器 i 出 5 问被? 




• rv^ti • 沪 令 . 








mv\mi i : 的其他清求也适合作为 post 济求吗？ 
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测试.测试、再测试 


一定奚逬行检 t , 碥保你的清求数椐 
碥实 S 经狻铉。 

肴起来我们发送了一个合法的 POSTm 求，而 址根据前面 违立 Mike 注册 
页面（使 H1GET) 的经验，我们知道这个请求数据足 iH 确的。俱是我 
们不能肯定请求确实得到了处理。 

在这种情况下，也就是说没有得到服务器的直接反馈，就需要检査请 
求数据确实发送到服务器并巳适当地接收；否则，可能在更晚的某个 
时间才发现问题。这样的问题会很难调试……毕 t， 谁能记得3个月前 
写的代码呢? 



验 iiE 用户名和14令的服务器端程序会为你提供迕 
接反馈.这样就能很容钻地确认请求数据匕被接 
收。实际卜 .， 大多数服务器端程序部会对诺求数 
据作出响佐，提供某种反馈。 


但是有些程序——如 M i k e 的服务器端注册页面 
一却没 打告诉 你接收到什么数椐。要与编写这苎 
程序的程序员交流。通常，增加几行代码很容 
易,至少增加一个 echoN 应所收到的数据。这样 
-来就可以确 价 你发送的数倨与稈序接收到的数 
据完令•致。 


(2 ihll . 姑矗达在嗶助 
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POST 请求 


行测试(再次)- 


下面来 看服务器 反馈的内容,， 

从 Head First Labs 下栽第12草的示例文件(如果目前 尚未下 裁）。 其中有 -个更新版本的 
register . php , 名为 “register-feedback.php” ， 它会在新用户提交注册数据时给出一 
些可视化反馈。 


在 validation.js 的 registerUserO 中更新请求 URL 来使用这个新脚本，然后再次尝试 
运行 Mike 的汴册 ( Hlfii 。 



Sewn " 试伦 . 


Mike's Mov>es 


,•• 奢 ac* -s* ads < 


.^Qst^a 


釀今 IBIU 暑 ^ 


Welcome to Mike's! 


Here’s what you entered, : 
Usemame:^^ 


Read Reviews 


Write Reviews 
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服务器的问题 



Jim ： 你确定吗？我相信背定有人忘记修改脚本来接收 
POST 参数。拜托，肯定是服务器的问题！赶快解决问 
题，我们才能继续…… 


Jill ： 不对。我专门问过他，_本确实接收了 GET 和 
POST 参数。你确认已经发出客户的 if 细信息 了吗？ 


Jim ： 我敢肯定， registerUserO 使用了一个 POST 请 
求，而且根据前面使用 GET 的经验，我知道这个请求对 
象能正常工作。 


Jill : 嗯，肯定你在哪个地方犯了错误。 


Hi.hu . 她蕞 迨在帮助 

wife * 的菔务8 蟪植璆赛搞 

:央问蛀 ， 


Jim ： 不可能。所有数据都在请求对象的 send () 方法 
中……我再三检査过。所以我知道数据肯定传递到 
Web 服务器了。 


Jill : 嗯，那就不是脚本的问题。来养肴输出豇面！没有 
用户名、名或姓，什么也没有。 


Jim ： 等一下。如果我向服务器正确地发送了数据 
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POST 请求 


服务器 对 POST 数椐解码 

我们的脚本向服务器发送 r 一个请求，其屮包含正确的 i 身求 
数据。但是不知为什么，服务器没有把这个数据传递给服务 
器端程序 register - feedback . php 。 在服务器和 register - 
feedback.php 之问到底发生了 什么？ 

我们知道服务器要接收 POST 数据并解码， m 是服务器必须知道 
如何对这个数据解码……这说明它要知道收到何种类型的数据。 



免务器宅全不知迮 POST ,# 
^中數兴 iff 玄类$ •••••• 

泛是_个@嚷，（2袅亡 本：、 
我辛4觀， ； 




7 


C 

由子 衫器不 如漾敫轉气 义 U 


vh 



register - feedback.php 
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发送了什么？ 


f 要告诉服务器芨送了什么 

盂要 u : 服务器准确地知逬发送给它的数据是什么类型。 m 是这个信息+能作为请求 
数据本身的-部分，所以需要另外 种 方法来告诉服务器。 

只要需要告诉眼务器有关请求的信息，就可以使用请求首部 (request header ) . iff 
求首部足随请求发送的佶息，服务器 " r 以立即读取。服务器还可以发 m 响应酋部， 
这是有关服务器响佐的一些信息。 


服务器通过清求酋毁从浏览器荻职信患。 




電裳沒一个汶求芒邾中 m 务器 


Web 服务器 





Web 服务器 


@差；务器§; or 
给洌 8器的信总, 


服务器使用 响 at 部向 浏览器崖送 
信患。 


'呢务器运 (？ 一 个畸 
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POST 请求 



哦，我 t !7。 在一令 “TM 求中， 数栊 是清求 
URL 的一部分，所认 R 陡是 丈 枣， （5 是在 POST 请 
求中，必涵明碓 M 告诉 ffi 务器会摟收到 什么数 


在 po st m 求中不 n 是能发送纯文本,还可以发 
送更多其他类喂的数据。服务器接收到 POST 请 
求时，它不知道所要处理的数据是 H 种类型，除 
非你明确地吿诉服务器会收到什么数榭。 


服务器知道 r 你发送 r 什么类型的数据，它 
就能对 POST 数据解码，并适当地处理。对于 
M i ke 的注岍页面，需要告诉服务器我 ff 1在发送 


名/值对。为此，"了以设 S —个请求首部，名 


为 “Content-Type” 0 



求 URL 扣 POST & 相. 2 
相一个内容 类螌， 


tT-V 4 ^^ 


奚嶒扣 *5 -个内容炎兔 • 巧 
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请求首部 

在清求对象上使用 setRequestHeaderOifi : 
资谙求酋部 

一旦知道要设置哪-个请求首部，具体设置非常容易。只需在请求对象 t 调用 
setRequestHeaderO , 并传人请求首部的名和该首部的值。 

对于名順对，我们希望设罝 Content - Type 请求首部。需要将这个首部的值设 
置为 application / x - www - form - urlencoded 。 这个中有点奇怪，不过这 
只是告诉服务器我们在向它发送名/值对，就像 Web 表单发送名/值对一样。 


function registerUser() { 

t = set Inte r va 1 ( M scroll Images O*', 50); 

document .getElementById( H register M ) .value = "Processing" ； 
registerRequest = createRequest(); 
if (registerRequest == null) { 

alert("Unable to create request. M ); 

} else { 


&password= f, + 
n &firstname =f, 
M &lastname= M + 
&email= M + 


var url = "register.php"; 
var requestData = "username=" + 

escape (document .getElementById( H username M ) .value) 
escape (document .get ElementByld("passwordl •” .value) 
escape (document .getElementById( ,T firstname f, ) .value) 
escape(document .get ElementById(" last name” ） .value) 
escape(document .get Element Byldt^email^) .value) + ” &genre=" + 
escape (document .getElementByldt"genre •” .value) 十 favorite=’_ + 
escape (document .getElementById( M favorite n ) .value) + "&tastes=" + 
escape (document .get ElementById( M tastes M ) .value); 
registerRequest.onreadystatechange = registrationProcessed; 
registerRequest • open {"POST", url, true); 
r^gist^rRttquttst.s^tRaquestHeader ("Content 
"applicat ion/x-wwv-f orm-urlencoded"}; 
registerRequest.send(requestData); 


w 珀求 


…… 爸讷.板务器含呔 f *) 名 / 化的.类 
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POST 请求 


tlierejare no 

Dumb Questions 


: 这么说，请求首部会随请求发送到服务器，对 
吗？ 

^ : 对 9 所有请求首部都是请求的一部分。实际上， 
浏見器 会自动设罝一呰请求首部.所以其实只需在现有的 
请求首部之上再增加一个请求首部。 

| v ^) :我们还会得到响应首部，是吗？ 

^:没错„浏見器和服务器总会生成首部。只有当有 
需要处理的信息时才考虑这痊首部，如设置内容类塑或者 
从响应首部获取一个状态。 


: 这么说 “ Content - Type ” 用来告诉服务器我们发 

送的是什么类型的数据，对吗？ 

^ : 完全正确。在这里，由于我们使用的是名/值对， 

相应的内容类型为 " application / x - www - form - urlencoded ". 
这种类型告诉报务器所收到的值就类似于正常表单提交时 
接收到的值。 

: 还有其他内容类型吗？ 

^ 2 多得很呢。要了 醉其他 的内容类型，可以用你最 
喜欢的搜索引擎搜索 “ HTTPContent - Type ” 看看。 



假设你希望向一个服务器端程序发送 XML 数据， 
你认为要让 Web 服务器适当地对数据解码做些什 
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运行测试 


行测试(再一次)—— 

能行吗？能正常工作吗？ 

91 新请求，使之 ti 括一个 Content-Typei 汽求泞部，两来 bti 尺 Mike 的纟|:屬以曲’。提交你的 
信息，呑 T ； •服务器会反馈什么。 




ai|u#AkAA n— 
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POST 请求 



0 





POST 机密数据 

Mike 还会仵注册页面和服务器之间传递什 
么机密数据？用户名请求需要使用 POST 方 
法提交吗？ U 令请求呢？ 

要由你来确定哪些请求最好作为 POST I 青 
求提交，而哪些作为 GET 沾求更合适。更 
新 Mike 的页 _， 使之史安全。完成之后， 
翻开 下一!再做儿个练习。 


I 
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査 iel 游戏 


雄 娜轶 


XARSYROTADNAM 
ACLVVRETN I TES 
A V IOASBALTRSV 
QSLXHLNOLERSL 
CUYORS I A E A Y A R 
ACNNEUTDYNSRA 
LOECCBTUADNES 
LPUKAMANNTOLN 
GRYCC I S E 0 X I B R 
E N I AHTENAUTOR 
TUNBADQCNRPAN 
K N G T FAPOSTOSA 
NDULRIEDR 丨 UDY 
ASEREDAEHTESD 
JERCICTHRIZAR 


輩 询表: 

Get 

Post 

Validation 

Submit 

Mandatory 

Options 

Secure 

Unencode 

Header 

Status 
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POST 请求 


GET 


2 是 POST 


再来杼一个 “ GET 还是 POST ” 场饺。你要确定对干以下各个 Web 应用采用哪种 
请求方法燉合适。 


GET 还是 POST 




贫彔金4我最# 
欢的揸涑葙品 




惰求今天出 
品的 house 
blend 咖唏 


，用新沟容*新 I 


V.maamHnmr. k| 

■ j L 


•: 主冊贅 记一令 
惠級瑜珈班 


用馆 卡从 iTimes 的 
兵促铀产兵 
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练习答案 



单 询表: 

Get 

Post 

Validation 

Submit 

Mandatory 

Options 

Secure 

Unencode 

Header 

Status 
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POST 请求 



再来旮•个 “ GET 还是 POST ” 场景。你耍确定 村丁以 |、_各个 Web 应用采用哪种 
请求方法敁合适。 


f 录^當沧苁用户名扣 
o 今，你冱常4望係护 
这科的姿含。 


庐必#的 一个阇 專 
的眘兵磺求 f | 用 POST 


^(c> wai7 … ... 

工！望州 m 给 


廷达 （i 用卡3 .£• t « <i 用 
POST 方法，残老采用 
的孕 ft . 如 SSL 。 
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附录 I : 其他 


1未谈到的) 5大问^ 


♦ 



真是一个漫长的旅程……就快到终点了。 

实在不舍得你离开，不过在你离开之前，还有几个问题需要指出。我们实在无 
法将 Ajax 的所有内容在一本不到600页的书中全部讲到。实际上，我们做过尝 
试……似是布场的反应称书架 h 摆那 样-本 28磅 t 的大厚并不合适。所以我 
们只好舍弃所有不要•求你必须了解的内容，并在这个附录中指出最后儿个 •!" (要 
1亂 

没错……这确实是最后的内容了。不过另外还有一个简短的附录……和-个必 
备的索引。对了，最后还有 些 广告……你知道的，这是少不 r 的。 
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00 M 树.共考 • 
幸的一个 I 5 氣 ♦ 



OlV 






A^r 



检査 DOM 

轉 1 检 tPOM 

到目前为止，你已经能非常熟练地使用文档对象梭型 (Document Object Model, 
DOM) 动态史新你的 Web 页面。不过，使用 DOM 对页面作出修改，怎样才 
能 0 到 Web 浏览器所看到的！ )( 曲 ' 呢？芥案就是使用 DOM Inspector 检迕 I. 具。 



\L^ . 

在 Windows 上必须要求安装 DOM 检查工具。 

安装 Firefox 时，选择 Custom Install, 然】 5 选择 Web 
Watch it! Developer Tools, 这样才能在 Windows 机器 I : 运行 
DOM inspector 。 


shoe 



v _ ■圍 

, ;: , ®®_t 
、 r ll _® T r 」 
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其他 





在 Internet Explorer 中检 f POM 


^Windows h Mi Hi Internet Explorer 时 D 要 l、 _ 我 III 安装一个中-独的 l:K - 来检许 
DOM 。 lElnspcctor「.HtiW — 个针对 Internet Explorer 的 DOM 松查 和一 
个 HTTP Analyzer 上。你需要做到如下几点。 


从哪里得到: 


如何使用: 


http :// www . ieinspector . com / dominspector / 

下载并安装旧 nspector 的相应 . EXE 文件，然后启动这 
个工具，可以在一个窗口中同时查看页面、其标记代 
码以及这个页面的 D 0 M 树。 


JE We60«w«top*t 4 ■-个 # ^■气乂 

“垠多 ft 他抓 




Submit Word 
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DOM 检查和 JSON 库 


在 Safari 中检查 POM 

在 Safari 屮检查 DOM 时耑要使用 WebKit 。 WebKit 足 Mac OS (如 

Safari 、 Dashboard 和 Mail) 使用的一个开源系统报衆，以从 hup:// 
Webkit.opcndarwin.org/ 得到。 

一旦下栽了 WebKit, 把它拖到你的 Applications 文汁 •火， 然后需要在一个 
终端窗 n 运行以 K 命今。 

defaults write com.apple.Safari WebKitDeveloperExtras -bool true 

接 F 来进人 Applications 文件夹 , 打开 WebKit . 右键点击页面 
h ■的 任何位 S, 然 后选择 “Inspect Element:” 9 


ii 个 f c $矛;5浏览器 


















其他 

吆 g 善降级 

Ajax 中诂痛苦的 H 题之一就是妥苒 降级： 如 H 确保你的应用在未启 
niJavaScript (或者 JavaScript 的版本相当低）的浏览器上也能正常工 
作。 由于这是一个很棘手的问题，而且很多人都针对现代浏览 
器设 H •应用，所以只能把这个问题放汴附录里 简申介 绍。 

不过，如果你有兴趣为毎一位可能的来访者提 供汉好 的用户体验， 

那么需要做到以 T 几点。 

Q 首先 设计 一 个不使用 JavaScript 的网站。 

这是构迮可降级 W 站的最大区别。你个能从一个 AjaxN 站起步，然 
后创述代码把它“降级”为一个# AjaxN 站，在不友持 JavaScript 的 
浏览器上不能运行任何代码。 

所以必须创辻一个没冇任何 JavaScript 也能正常丁作的网站，这正是 
为什么大多数设计人员不考虑作 JavaScript 浏览器的原因。 

Q 大虽使用 < a > 元素和 “ Submit ” 按钮。 

无 JavaScript 意味着没有事件处理程序。如果没有 onBlur 和 
onClick, 能用来触发动作的标记只能足 < a >； e 素（链抟）和表单 
提交按钮。要大鼠使用这些元桌，因为这是从一个佧 JavaScript 豇面 
启动服务器端处理的唯-方法。 

O 编写服务器端程序而不假设只会收到 Ajax 请求 4 

编 V —个响应异步请求的服务器端程序 Lj 编写一个响应表申提交的 
程序片没有本质上的 K 別。+过，敁人的 R 別足眼务器端程 卬所返 
冋的内容。对 f 一个 Ajax 贞 [fij 的验证请求，响应可能是 “okay ” ， 

但是非 JavaScript 页面怎么能解释 “okay” 呢? 

实际卜 .， 服务器端程作往往盅要根据 沾求 参数确定 W 求中有什么。 

根据这个信息，程序耍返 W 小同的数据。所以紂于一个 Ajax 请求， 

程序可能返回•个很短的响应， l 〖 ii 对 r 一个非 Ajax 请求，响应吋能 
足一个新的 XHTML ! U _ 向或重定 A 。 

Q 测试、测试、测试•…更多地测试 9 

妥苒降级中扯大的问题是测试。即使你构迮 rir 面的一个非 
JavaScript 版本，并使用广适，的元桌和服务器端程序，还必须仵所 
能想到的每一个浏览器上测试你的豇面。特别是，- H . 增加 Ajax 版 
本的！ Jilfii ， 还要在那些+支持 JavaScript 的浏览器上做电多测忒。你 
永远无法知道在你增加交互性的 M 时会引入什么问题。 


不 liir 之用 户钧(本漢 
秦的铯礓漱:'去.不过芍以淺 
IK % 敦人含采用达 

科方法 《 


中各她 <1 

鈸 •个 


你现在的位置 ► 475 





UI 库 


巧 script.aculo.M 和 Yahoo UI 库 

你已经对一些佧常酷的 Ajax 工只包和枢架有所了解，在这呰工具包中我们 
提到过 script . aculo . us 。 不过，实际 _ hscript . aculo . us 更应算是一个用户界面< 
user interface , UI ) 工具包。另外还有很多其他的 LH 库。所有这些库都关注 
于如何更容&地构建漂亮.用户友好、 H •有非凡视觉效果的用户界面。 

这些库 M 常就是 JavaScript 文件， 吋以 I 、我然后仵 XHTML 页阁中引用（不论 
这个页面是否连接到一个异步 JavaScript ) 。 


script.aculo.us 


咎 i 不下戤仔何 i 碑也芍 k / •噠用 

SCUTpl. Acuto . US . 翥？ i 用这•签 

URt 3 


从哪里得到： http://script.aculo.us/ 

如何使用： 

<hoad> 

< title>Webvilie Puzzles</title> 

<link rel= ,r stylesheet" href= M css/puzzle.css” type=’’text/css" /> 

<script type= n text/javascript" src= M http : //script.aculo.us/prototype.js°X/script> 
<script type=”text/javascript" src= M http://script.aculo.us/scriptaculous.js M X/script> 


<script type="text/javascript" src=”utils.js"> </script> 


jSAQ - 


i- 


7 


I— 








■ q . r 


github 

0 VOC M COM MtMW 


Pncmg &Q&UP 


settpt. aculo . «jf£ ^E) 

Prototype ^ iiOi Sg ^ 

器史 5 和一 # 焱屬 Jdv«Sc 

npt 函數 



Demos 


R«C#n! 


Interactive Demos 


I 0*^** W> ** 


r _ •! 

Hi •## in « pr » a^i *rnpt ■一 《Hectfc 


\t0.0 " 

㈣ 


DuMd v 


Backend Integration 

T*>«m fkjbi o 
• • rv _ MU * H 


near 

u** at%o* 


，禮 a la 

try c/htr \ 


% «cuo u « i«r •喻 mM*- 

enroot —• «!>••，• * 


L'ani 

.. IT #- W . 


£*wc * ， 
A**» *« 


勹 

script, aculo . “s fe 衫多个 
JavaScript % ib A § 

if 


gd http://github.cofn/madrobby/scriptaculous/wikis/demos 
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其他 


Yahoo Ul (YUI) 


从哪里得到: 
如何使用： 

<head> 


http://developer.yahoo.com/yui/ 


< title>Webvilie Puzzles</title> 




7 


<scri 

_ 冬玄 <scri 


Clink rel="stylesheet” href="css/puzzle. css” type=” text/css’’ /> 、 

<script type="text/javascript" > 

src= M http : //yui . yahooapis . com/2.5.2/build/yuiloader/yuiloader-beta-min. js n X/scT^^c> 
<script type="text/javascript" 

src= M http://yui.yahooapis.com/2.5.2/build/dom/dom-min.j s"X/script> 

<script type= n text/javascript" 


备个 _ 冬系 <scnpt type=”text/javascript •’ 

现一坤 src= »»http : //yui . yahooapis . com/2.5.2/build/event/event-min. js H X/script> 

拖旋、 

J ⑽穿專作 <script type= n text/javascript" 

src="http: / /yui .yahooapis . com/2.5.2/build/animation/animation-min. j s M X/script> 
<script type=’’text/javascript" 

src= u http: //yui .yahooapis . com/2.5.2/build/dragdrop/dragdrop-min. j 8 M X/script> 
<script type= M text/javascript M 

src="http: / /yui . yahooapis . com/2.5.2/build/element/element-beta-min. js ,f X/script> 
<script type="text/javascript H src= M http : //yui.yahooapis.com/2.5.2/build/button/button 
min. js"X/script> 


<script type= n text/javascript" src= , 'utils.js”> </script> 



scupt. aculo. us. 

俱 *5 呢多 0 當樣的⑴并作 • *. 
?•) 泉一發托•士 sl 的施故功餘。 
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JSON 和 PHP 

M 在 PHP 代码中使用 JSON 库 


前面匕经 >5•到 JSON 吋以帑助你在 Java 应用中发送和接收复杂的对象。+ 
过对于 PHP 脚本，如朵不希望手动地键入 JSON 格式的数据，还畨要一个 
库。 手动键人 JSON 对象很麻烦，所以提供一个 JSON 库对 T •完成服务器端 
JSON 交瓦 很釘 怠义。 


a ] 以如下在 PHP 脚本中使 !Tj JSON ， PHP 巾; t 须涉及 A； SON 的特定语法。 

从哪里 得到： PHP 5.2.0 和更高版本中已经内置有这个库。 

如何使用： 调用 json _ encodeO ， 并传入 PHP 变虽和数据。 




p H p 脚本中技兩 3 S 0 N & a 。 


.M 


~ * ^ 

$itemGuitar : 


芍以朱用正當的砥_ 
^ PHP 代砝中 釗逢钕 
通扣变養 a 


array( 

id 1 => ’itemGuitar', 
description' => 'Pete Townshend once played this 

guitar while his own axe was in the shop having 
bits of drumkit removed from it .’， 
price' => 5695.99, 

urls' => array(• http : //www.thewho.com /’， 

'http://en.wikipedia.org/wilci/Pete Townshend') 


)； 



$output = j son 一 encode ($itemGuitar); 
print ($output); 





JSOWJ 
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其他 


在 PHP 5 . 1 和 E 罕皈本中使用 JSON 

假设你没有使用 PHP 5.2, rfiia 无法将系统升级（或者不想升 级）。 在这 
种情况下，要在服务器上允许 PHP 使用 JSON 则需要 卜•裁一个库^ 


ii 个廣打常？ I 丈. 垠农 子迻用 
4 iiaPEARfe 装以浼子汸问。 


从哪里 得到： 


如何 使用： 


http://pear.php.net/pepr/pepr-proposal-show.php7icM98 

创建一个新的 Services _ JSON 对象，并把 PHP 数据传入该对象的 
encode () 方法。 



时 《()£ 含柘 下戤的磅了 
©老 达沒笱 t ) 劫爸 :含名 
PW 的一郝分。 


require 一 once (JSON.php); 

$json = new Services_JSON (); 


芒光. 钇逢一个类 

嘍馮 S*iwices_JSON 


立聿蟪 釗達 PHP 老; 

这！ 1 沒有仔何薄别 科。 
iFlJSOM^pbg 


encoieO. 这？ * 4 
用期®妃濃的 S * WCM - 
JSON 的象 


$itemGuitar = array( 
f id' => , itemGuitar ’， 

•description' => *Pete Townshend once played this 

guitar while his own axe was in the shop having 
bits of drumkit removed from it .’， 

•price’ => 5695.99, 

f urls ? => array(•http://www.thewho.com", 

'http://en.wi kipedia.org/wiki/Pete Townshend ’） 



$output = $ j son->encode ($item6uitar); 
print ($output); 
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ASP.NET Ajax 


巧 Ajax 和 ASP.NET 

如果你经常使用 Microsoft 技术，很可能想广解 ASP.NETAjax 。 ASP.NET 
Ajax 是 Microsoft 提供的 一个免 费的 Ajax 专 HI 版 +，拥绑 /f.Visual Studio 
2008 和其他 Microsoft 技术中。 


由 丁 -ASRNET Ajax 要结合 Microsoft 的卩I■视化产品使用，所以它更像是一 
组吋拖放的前端拕件，而 H. 能够构违“支抟”这些控件的代叭。 

在 http://www.asp.net/ajax 上可以找到你想 jf 解的所有关于 ASP.NET 
Ajax 的信总。 
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萁他 


/Ft gASP.NET Ajax 來构建 Internet 
Explorer^ Web ^ i 

如果你住参 4 开发一个氓要的 Microsoft 产品，则灯很多允分的理山宙 
要你深人了解 ASP.NET Ajax 。如果你已经在使 HI Visual Studio 构逮应用， 
ASP.NET Ajax 会为你所做的 [ 作锦卜.添化。 

但是如果你只是构建要在 Internet Explorer (以及 Jt •他浏览器，如 Firefox 
和 Safari ) 卜.运行的 Web 应用，那么并小 H 要 ASP . NETAjax 。 完全可以 
使用你已经了解的技术以及 DOM 和请求创建 r 具函数,就能 ih 你的应 
用在所行主流浏览器 h . 很好地工作。 




㈣ 總坤 


禾杖3•鴻 "5 
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附录工爯蚤数 



有时你希望所有代码都在一处。 

前面已经大量使用 utils . js , 这是我们编写的一个小工具类，包括 Ajax 、 
DOM 和事件工具函数。卜'面几页将把这些函数汇集在一处，允 许你在 
a 己的工具脚本和应川屮使用。这是你熟悉这作 j : h 函数 的坫后 机会， 
抓往这个机会，然后在此坫础 h 开发你自 d 的 I .具 w 数！ 
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utils . js 


utils.js : 继续扩展 


以下是目前为止所编写的 utils.js 代码。 + 过为什么就此止步呢？你应该 
在 utils.js 中增加你己的函数。是不是需耍一个方便的彳 1 用函数来得到 
一个节点的文本？可以把这个函数放在 utils.js 中。 


过一段时间后， utils.js 就会成为你自己的个人框架。 

function createRequest() { 


Fiteiox ' o 利器中 


request = new XMLHttpRequest(); j 

catch (tryMS) { 

try { ^ 

request = new ActiveXObject ( n Msxml2 < XMLHTTP H ); 

} catch (otherMS) { 


H^Minosott^ 求的象的 
— 个麻■本 . 


•ii 袅另一个械本 


request = new 
catch (failed) 


request = null; 


Act iveXObject ("Microsoft .XMLHTTP •”； 


J ® watt, k/* ft ill 用枝存 
砝定如何艰苦栉沒或钍理抟 

tTL 


尽簀不奋 I 系函 老中句 


return request; 


我们把 i S Amy () 移入 “ tHs . j *, ©玲这 i 一个逢 
用函教 • 系不鹑宅吁一个只沐的在用》 


function isArray(arg) { 


if (typeof arg 


'object') 


var criteria = arg.constructor^toStringO.match(/array/i); 

return (criteria != null); ^ ^ J 

K 巧華 • 咖 〆 • 不 S 分 


return false; 


如菜枸 it 函數 £ 含州 ^», cutetia^^Hutl, ®'J ii 
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工具 $ 教 


function 



getActivatedObject (e) { 


f 蚁一个 Ev « Kt 2 寸象， 
#发找攀件的的象。 


科达® 


var obj; 
if (!e) { 


// early version of IE 


obj = wi ndow* event. srcElement; 
else if (e.srcElement) { 


ii window 对象中 


// IE 7 or later 
obj = e.srcElement; 



劣镝鈑本的咒值用 E 时" £ 的象的 
stcEtcmcnt 羼性。 


} else { 


// DOM Level 2 browser 


obj = e.target; 

) 

return obj; 





function addEventHandler (obj f eventName, handler) { 
if (document.attachEvent) { 

obj.attachEvent("on" + eventName, handler); 

} else if (document.addEventListener) { 

obj.addEventListener(eventName, handler, false); 


} 




㈤ 以 

卖现注 册。 


用 i # 法。 
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符吾乌数字 

<a> elements,<a> 素 • 134 

<script> tag, 〈 script 〉 各 iUii ， 12. 50, 51.57 

404 status code,404 状态 P4, 36 

A 

activated object, 激活对象 ， 166 
ActiveXObject 21 

Microsoft browsers, Microsoft 浏览器 ， 64 
addEventHandler() 164, 165, 187 

this keyword, this ： X ； 键字， 424-425 
addEventListcncrt ) 142, 143, 147, 149, 150, 164 
event objects ，货件对象 ， 160 
addLctter( H.unction ， addLetterO 闲数 298. 308 
Ajax 

benefits of , 好处 10 

design principles , 设 1| 职則 47 

expecting the unexpected, 要 Mil •到 能打 息料之外的 
琪悄发生 79-81 
interactions , 交互 66 

Framework and Do-lt-Myself JavaScript , 枢架与自 ci 动 T - 
JavaScript 332 - 333 
library ( 参见 frameworks and toolkits) 
request objects, 请求对象 398 
what is, 足 什么 4-5 
when to use, 何时使用 II 
alert( > function 名 lert(> 由数 58-59, 157,428 
ampersand (&) 454 
appendChild() 255,305 
applications, 应 HI 

new approach, 新 /; • 法 3 
traditional approach, 代统方法 2 
arrays, 数组 394 
ASP.NET Ajax 480-481 

asynchronous applications, 异步应用 71, 173-228, 176, 187 


checkPassword() event handler, checkPasswordO 事件处理 
程序 190-191 

handling events ，处理事件 187 
Mike’ s Movies 181 

monitor functions, 监视 器闲数 209-213 
callbacks, 回调 211 

update Register button ，史新 Register 按钮 211 
when to call, M 时调用 210 
objects , 对象 

share same name ，冏名 195 
storing callback functions , 存储回调闲数 1 1) 7 
one request object, •个済求对象 196 
ordering requests and responses, 済求和响应顺序 203-204 
servers , 服务器 

handling events , 处理事件 186 
sending a request object to the server, 向月 R 务器发送诸 
求对象 186 
setlnterval( ) 221-222 

showPasswordStatus( ) callback, showPasswordStatus( > 回 
iH 190-191 

status variables , 状态变 ft 212-213 
two request objects, 两个清求对象 1 今 8 

asynchronous requests and responses, 碎步清求和响应 5,8, 
10-11,46, 173-175, 197,218-219,314.443 

attachEvent( ) 149, 150, 164 

event objects, 嚷件对象 ， 160 



behavior, separating from content, 行为， S • 内容分奥 82-84 

benefits of Ajax, Ajax 的 4 /•处 10 

book examples download, 本书下我•例 14 

branch, 分支 242 

browser-level updates . 浏览器级吏新 10 
browsers, 浏览器 65,73 
callbacks, M 调 76 

cross-browser applications , 跨浏览器应用 148 
DOM trees, DOM^ 363 

how they see your XHTML, 他们如何看你的 XHTML 234 
browsers ( 待续） 
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new DOM nodes, 新 DOM W 点 302 
requests , 消求 10 
tree structure, 树结构 236 
Bullet Points , 要点 

asynchronous requests, 碎步 ift 求 8 
browsers, 浏览器 65 

buttonOvert > function,buuonOver () 闲数 135 



callbacks, |"1 调 23, 27, 33, 35, 5(), 66, 76 

checkPassword( ) event handler, checkPassword(> 事件处理程 〆 f : 
190-191,2(K) 201 

checkUserName( > funLlion,checkUserName<> 闲数 56, 7(), 
200-201 

child, 子节点 242 

childNodcs 308,320,357 

child nodes, adding, F* 节点，增加 255 

clear text ，明文 449-450 

clicnt-side code, validating format, 客 / •’ 端代 fi l 4 ， 验 illi 格式 
42()-421 

code , 代码 

reuse, $1 Ifl 60,62-63 
writing large piece, 编写大段代 2% 
coding violation, 编码问趙 419 
color rendering , 浪染顿色 10 
compatibility issues, _容性问篇 10 
compiled languages f 编 I 筆语言 392 
consistency, 一致性 414 
constraints, 约束 414 

conlenu separating from behavior♦ 内容 ， f i ■ 为分成 52 ， 

82 - 84 

Conlcnt-Typc 463 

request header • ift 求疗部 461 
content versus structure, 内对 1 j 结构 230-231 
context-specific graphics ， 上 F 文特定图片 104 
creaieAttribute( ) 303 

crealeElemenU ) method, crcatcElement( )fjUk 301-302, 3()3 

createRequest( ) function.createRequestO 闲数丨 3, 20, 22, 25, 50, 
61-66, 154 


createTextNode( ) 303 

cross-browser , 跨浏览器 
applications , 应用 148 
utility functions, l:H ： 函数 154 

CSS 5, 100-101. 108 
classes f % 120, 134 
images , 图像 133 
positioning, 定位 289-290 
presentation, 82-84, 293 

CSV (comma-separated values), CSV ( 逗号分 Wffi) 349-351, 
354-357 
data, 数谢 381 

customers, requirements, 客户 , 需求 413 



data , 数据 

duplicate« 艰复 443 

validating formal and content, 验 ill: 格 A 和内容 420-421 
descriptive ids, 描述性的 ID 264 

design , 设计 113 

DRY: don’t repeat yourself, 不要 |’| 我 1 ft U 423 
disabled, 禁用 21 

displayDelails() function.displayDelailsO 函数 13,35, 35-36, 
370-371,395 

display item's details, 商品 细仏息 13 
divs 12 

document object...Up Close, 深人研究 documcm 对象 
creating new parts of a page, 创 Ifc ft iM 的新部分 233 
finding element hy id attribute ， 按 id 域性作找尤素 233 
finding nodes by tag type , 按査找 Yi 点 233 
getElcmcntBylD( ) 233 
getElementsByTagName( ) 233 
root element, 根元素 233 

DOM (document object model), DOM ( 文料对染模 ？ ! ） 5, 
143. 229-282 
appcndChild( ) 255, 305 
as a tool ，作 为丄具 280 
branch ，分支 242 

changing page structure, 改企奴曲结构 300 
changing page without reloading, 修改 ! JllAiifii 疋须策新加 
我 245 

child, 子元素 242 
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child elements, 238 

childNodes 262. 320 
createAttribute( ) 303 
createElement( ) 303 

createElement( ) melhod, createElementO/; • 法 301-302 
createTextNode( ) 303 
dynamic application, 动态应用 244-245 
elements, jtM 

changing versus moving, 改变和移动 252 
locating by name or id, 按名或 id 定位 256 
insertBefore( ) 305 
inspecting, 检査 472-474 
leaf, 叶子 242 
manipulating, 资理 283-328 
( 参 1 Al Wogglc) 
new nodes, 新 • 点 302 
ncxtSibling 262 
nodeName 306-307 
nodes, 节点 242,254 

adding child, 增加子节点 255 
node Value 306-307, 320 
objects, 对象 237 
parent, 父节点 242 

parcntNode property, parentNcxle{4ft. 254, 262 
parsclnt 320 
previousSibling 262, 32() 
removeChild 32() 
removeNode( ) 305 
replaceNode 320 
root element, 根 /£ ： 米 242 
text node, 文 : 本界点 274,275 
trees, 树 243, 248 - 251 
browsers, 浏览器 363 
Webville Puzzles 248-251 
what is, 什么 & 232 
XHTML to 234-235 

xml requests and responses, XMLift 求和响应 359 
DOM Inspector 472-474 
Firefox 472 
Internet Explorer 473 
WebKil 474 
DOM Level 0 143, 164 

event handlers, 私件处理稅序 158 
DOM Level 1 143 


event handlers, 如件处现程序 158 
Firefox 162 

Internet Explorer 149, 162 
Opera 162 
Safari 162 
DOM tree, DOMW 

family relationships, 来庭 ; Xj 系 262 
whitespace, 空白 272-273 
XML response, XML 响应 360-361 

Don’t Annoy Your Users, 小要惹恼 HI 户 47 
dot notation, /?Uci 法 382 

DRY (Don’t Repeal Yourself), DRY (不要 我 f 复） 423, 
425 

duplicate data, $:反数据 443 
dynamic data, 动态数据 3 94 



elements, jtif\ 

changing versus moving, 改变勺移动 252 
locating by name or id, 按名或 id 定位 256 
email addresses, exposed ， email 地址，换满 448 
escape( ) 450 

eval(> function ， eval() 函数 385,387-388, 392,398,401 
warnings variable, warnings^ M ： 436 
Event argument, Event 参数 161 
event framework, 件框架 159 

event handlers, 黎件处 理程序 104, 119, 140, 42 卜 428 
connecting , 连接 107 
DOM Level 0 158 
DOM Level 2 158 
event objects, 參件对象 ， 160 
Internet Explorer 159 
multiple , 多个 142,424-425 
new , 新 187 
properties , 诚性 141 
Woggle 295-296 
(参 UL multiple event handlers) 

Event Handlers Exposed , 举件处押.程序访谈 53 
event listeners , 啦件监听者 144 
event objects , 件对象 ， 1 60 


DOM Level 2 143, 144, 164 

Event argument, Event 参数 161 


events, 攀件 93-138 
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images , 阁像 132-133 
interactivity , 交互性 104 
onblur 1()6 
onclick 106, 107, 122 
onerror 106 
onfocus 106 
onload 106 
onmouscout 106, 122 
onmouscover 106, 107, 122 
onresize 106 
onsubniit J06 

window.onload 106, 107, 108 



Firefox 148-150 

DOM Inspector 472 
DOM Level 2 162 

properties, methods, and behaviors, 属性、方法 和行为 164 
Fireside Chats ， W i 炎 

Ajax Framework and Do-It-Myself JavaScript, Ajax 枢架 kj 
D1Y JavaScript 332-333 

asynchronous and synchronous applications, 诗步与同步应 
111 227 

JSON versus XML, JSON f jXML 4()4 
for"loop,for …循环 119 
forms and validation, 灰单与验 ilt 202,407-444 
coding violation, 编妈问题 419 
consistency, • 致性 414 
constraints , 约來 414, 416-417 

DRY (Don’t Repeat Yourself)，DIY ( 不要 ft 我 f:K) 423 
duplicate data, 希紅数椐 443 
eval( ) finKtion,eval()l^| 数 

warnings variable, warnings 变 li 436 
format and content« 格式与内容 420-421 
multi-layered validation, 多验证 414 
removing warnings, • 除 繁吿 * 437438 
validation process, 验证过稅 414 
validity, 合法性 414 
warnings object, warnings 对象 433-434 

form submit, 衣单 • 提交 28 

frameworks and toolkits, 框架勹工具包 99, 329-342 
jQuery 335 
mooTools 335 

pros and cons, 优点和缺点 334 


Prototype 335 
script.aculo.us 335 
syntax, 法 336-337 
lo use or not, 足 ： I ^ 使用 340-341 
functions, multiple, 函数 • 多个 128 



GET 22 

parameters ， 参数 458 

getActivatedObjecK ) fum:tion ， getActivatedObject()W 数 166 

getDetails() fimction,getDetailsO 闲数 13, 24-28,32 

gclElcmcnlById( ) fuiKtion.getElementByldO 闲数 56. 68-69, 81, 
114, 165 

Get it!, XHTML fragments, XHTML 片段 128 

get item’ s details, 得到商品详细信息 13 

getObject( ) utility function ， getObject( >T. ； H 闲数 168-169 

GET or POST? 467 

Solutions, 界案 469 
GET requests, GET 清求 449, 461 

data in request URL, 诘求 URL 屮的数据 450 
GET requests versus POST requests, GETi 汽求勺 POST 清 
求 449 

passwords, 跃跃欲 bt 191 

versus POST requests, •j POST in 4c 453, 461 

global variable, 全局变 ft 115 

graceful degradation, 妥舞降级 475 



handlers ( 参见 event handlers) 

hideHint( ) III ， 117, 122 

HTTP status code, HTTP 状态码 36 


ids 12 

IE 5 on the Mac, Mac 上 : 的 IE 5 61 
lEInspector 473 

images, M 像 124, 132-133 
CSS classes,CSS 类 133 
initialize page, 初始化 ！ 12 


490 索引 




索引 


initPage() function,initPage <> 函数 12« 56,57, 113, 122,155, 
168-169 

innerHTML 36, 299, 353 
interactions, 交互 66,125 
interactive web pages ，交 '/ • 性 Web 沉面 104 
Internet Explorer 148-150 
DOM Level 2 149,162 
event handlers, 杯件处理程序 159 
lEInspcctor 473 

properties, methods, and behaviors, 域性、 // 法和行为 164 
interpreted languages, 解释 i/f 文 3 今 2 



JavaScript 5, 12, 100-101 

closing brackets , 结束尖括号 18 
defining functions , 定义闲数 18 
disabled, 禁川 21 

evaluating textual data, ’I 卜 P: 文 + 数掘 385 
events (^ 见 events) 

frameworks (参 W-frameworks and toolkits) 
interpreted, 解释 392 
this keyword, this 关鍵字 ， 158 
unobtrusive, 小明确 52 
jQucry 330, 335 

JSON (JavaScript Standard Object Notation), JSON (JavaS- 
cripl 标准对象 id 法） 5, 379406 
converting response to object ，响应 H 换为对象 388 
data, 数据 382 

evaluating, i 十算 386 
server's response, 服务器的响 f*:£ 383 
data format ♦ 数据格式 389 
eval( ) function#val() 函数 385, 387-388,398 
evaluating textual data ， ’I 十算文本数据 
label names, fe 签名 397 
name-to-value mappings ， 名 Ifi 映射 430 
objecl properties, 对象域性 393 
objects, 对象 393 
PHPcode, PHPRPJ 478479 
properties, 域性 43() 
property names, 诚性名 397 
response string f 响应串 386 
Rob’s Rock ‘n’ Roll Memorabilia 

displayDetails() function ， displayDetails(> 闲数 395 
text and objects, 文本与对象 381 -382 


textual representation, 文本衣示 389 
versus XML 389 

JSON.parsc( ) 399,401 
JSON.php 390 



label names, 标签名 397 
leaf, 叶子 242 

M 

Math.floort > and Math.random( ) 291, 293 
Mike’s Movies 44-92 

asynchronous applications, 诗步应 ffl 176, 181 
submit form , 提交表单 181-183 
update XHTML page, £ 新 XHTMLlftlfiJ 181-183 
validate user’s passwords * 验证用户的跃跃欲试 
181-183 

checkFormStatus( ) 209, 213 

chcckPassword( ) 200-201 

checkUserName( ) 200-201 

completing registration page, 完成汴 趼豇而 224 

CSS 82-84 

one request object, 一个済求对象 1% 

ordering ihc steps to build, iMl 幣构 it 步骤 的顺广 r: 50 

password verification ，口 令检验 178 

POST requests, POSTifi 求 452 

Register button, “Register” 按钮 85 

registering new event handler , 注册新 _ 件处押 . 程序 219 

registration page, 注册 ! Ji 面 

allowing appropriate, 允 i 午适 ’ 的 85-86 
expecting the unexpected, 颅 i | •到未矜预料的情况 
79 - 81 

XHTML and CSS 51 

sending asynchronous request to server , 向服务器发送异步 
请求 219 

setRequcstHcadcrf) 462 
showPasswordStatus( ) 200-201 
showUsemameStatus( ) 2(X)-201 

Mike’s Movies ( 待 续 ) 

spam, 垃圾邮件 446-448 
submit button, 提交按钮 218 
Test Drive, 运行测 W ： 192,214,225 

with password and images, 带 U1 令和围像 184 
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window.onload event handler, window.onload 事 fj : 处理程 
序 54-58 

monitor functions ， 监视器闲数 209-213,215 
callbacks, Ni 周 211 
status variables ，状态变最 212-213 
update Register button , 史新 “Register” 按钮 211 
when to call, 何时调用 210 
mcx)Tools 99. 330, 335 
multi-layered validation, 多 M 验 ilH 414 
MULTI-valucd response, 多 Ot 响应 347 

multiple event handlers , 多个亊件处理程序 139 - I72J42, 
424-425 

addEven(Listener( ) 142 

N 

name-to-value mappings, 名值映射 430 
nodeNamc 306-307 
node Value 306-307, 320 

No Dumb Questions, 没 Y 〗 • 傻 I "] 题 
<a> elements,<a>/C 素 ,121 
<div> 259 

404 status code, 404^1 欠态 Pi 36 
ActiveXObjecl 21 
addEventHandler( ) 165, 187 
addEventListencr( ) 143, 150 
addLetter( ) 308 

Ajax, when to use, Ajax ， 何时使用 11 
alert(>function,alert()N^ 数 58 
ampersand (&) 454 
appendChild( ) 305 

assigning requests to other variable names ， 将请求赋朵其他 
变铱名 199 
asynchronous , 异步 5 
asynchronous requests, 异步 i 舞求 11 
asynchrony , 异步性 1" 
attachHvent( ) 150 
browsers , 浏览器 150 
callback function, ㈣ 调闲数 33 
child elements, 子元素 238 
childNodcs 308,357 
coding violation, 编码 I"] 题 419 
Content-Type 463 

createRequest( } function ， createRequest() 承数 63, 152 


CSS 124 

CSS class, CSS 类 134 
CSS positioning, CSS 定位 290 
CSV 357 

currentWordDiv.firstChild 316 
design principles, 设计原則 47 

disabling all fields while images are scrolling, 壤动图像时禁 
用所有域 220 

displayDetails( > function,displayDetailsO 闲数 35 

document object f documem 对象 165 

DOM 143,165,238,247 

DOM code, DOM 代 <24 270 

DOM Level 0 143 

DOM Level I 143 

DOM Level 2 143 

DOM tree, DOMW 255 

DRY (Don’ t Repeat Yourself)，DIY ( 不要 ll 我 t&) 

425 

cval() function ， eval() 函数 387-388,401 
Firefox 15() 

frameworks and toolkits ， 枢架与工具 iii 331,339 
getElementById( > function,getElementById() 函数 69, 165, 
259 

GET requests and passwords, GET 清求和 口 令 191 
global functions , 全局闲数 199 
global variables, 全局变 199 
href 121 

HTTP status code, HTTP 状态码 36 
innerHTML 36 
insertBefore( ) 305 
Internet Explorer (IE) 150 

Internet Explorer framework, Internet Explorer 枢架 159 

JavaScript, disabled, JavaScript, 禁用 21 

JSON 

data, 数据 387 
data format, 数据格式 389 
textual representation, 文本表示 389 
JSON.parse( ) 401 

mixing style into XHTML, 样式与 XHTML 混杂 183 
monitor functions ， 监视器函数 215 
multiple event handlers, 多个私件处 理程序 425 
nodes, 节点 255 
onclick 165 

onreadystatechange property, onreadystatechange 域性 26, 
33 

Opera 150 

password fields, 门令域 215 
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passwordRequest 215 
passwords, H 今 191 

POST requests versus GET requests, POST 済求 qGET 请 
求 453 

question mark (?) 454 

readyState property, ready State ^fl -： 33, 36 

refactoring code, 鮝构代码 215 

registration page, 注册 ! Si (fti 51 

removeNode( ) 305 

request headers, 济求汽部 463 

request object properties^ 请求对象域性 26 

request variables , 请求变 S ： 199 

response headers , 响应 H • 部 463 

restriction, 限制 202 

root element, 裉元索 255 

Safari 150 

self-describing data, ft 描述数据 369 
server traffic, 服务器流 ft 11 
setAttribute( ) 357 
setlnterval() 221 

sre property of an <img>, <img>^Jsrc 域性 255 

status property, status 域性 36 

synchronous requests, 同步 i 存求 316 

tabs, 标签页 134 

text node, 文本节点 275 

this keyword, this 关键字， 165,425 

toolkits ， 工 Hfei 99,331 

try … catch block ， try...catch 块 152 

TSV (tab-separated values), TSV (tab 分隔 fft) 357 

usemameRequest 215 

utils.js 63 

value property, value 域性 69 
warnings object, warnings 对象 434 
Wcbvillc Puzzles 278 
Welcome tab, Welcome tji 130 
window.onload 108 
window object,window58 
Woggle 290,305 
XHTML 358 

XHTML images, XHTMLI1H 像 124 
XMLHTTP 21 
XMLHttpRequest 21,61 

XMLHttpRequest object, XMLHttpRequest 对象 5 
XML versus JSON, XML 与 JSON 389 
XML vocabularies, XML ㈤ 汇表 358 

null 65 


objects , 对象 

accessing members, U/N 成员 393 

activated , 激活 166 

converting response to, 响应的换为 388 

DOM 237 

JSON 381-382 

properties, 域性 393 

request, in^R' 398 

responscTcxt property, responseText 域性 383 
share same name ， [rij 名 195 
storing callback functions ， 存储 M 调函数 197 
onblurevent, onblur 1 ^ 件 50, 106 

onClick event handlers, onClick 事件处理程序 12, 16, 24, 106, 
107, 122 

onerror 106 

onfocus 106 

onload event handler, onload 如件处理程序 106 

window.onload event handler, window.onload 來件处理程 
序 54-58 

onmouseout 106, 122 
onmouseover 106, 107, 122 

onreadystatechange properly, onreadystatechange 域性 26, 33, 72 
onresize 106 
onsubmit 106 

open( ) method, opcn<> 方法 26 
Opera 

DOM Level 2 162 

properties, methods, and behaviors, W 性、方法和行为 164 
order, NiSlt* 204 



page refreshes ， iJilfti 刷新 8 
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